body {
    background-color: #fff
}

#footer {
    position: fixed;
    bottom: 0;
    background-color: #fff;
    height: 1.1rem;
    width: 100%;
    z-index: 9;
    box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06)
}

#footer a {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: .2rem;
    color: #b5c3cb
}

#footer a.on {
    color: #2c8eff
}

#footer a .icon {
    font-size: .55rem
}

#footer a .name {
    margin-top: -0.02rem;
    font-weight: bold
}

#footer a .pictrue {
    width: .44rem;
    height: .44rem;
    margin: 0 auto .1rem auto
}

#footer a .pictrue img {
    width: 100%;
    height: 100%;
    display: block
}

.swiper-list {
    padding: .29rem .2rem 0
}

.swiper-list .item {
    width: 3.45rem;
    margin-bottom: .29rem
}

.swiper-list .item .pictrue {
    width: 100%;
    height: 1.92rem
}

.swiper-list .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.swiper-list .item .name {
    margin-top: .12rem;
    
    font-size: .3rem;
    line-height: .42rem;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.swiper-list .item .label-wrapper {
    margin-top: .12rem
}

.swiper-list .item .age {
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff
}

.swiper-list .item .money {
    height: .45rem;
    margin-top: .1rem;
    
    font-size: .24rem;
    line-height: .45rem;
    color: #ff4a4a
}

.swiper-list .item .money span {
    font-size: .32rem
}

.swiper-list .item .free {
    height: .45rem;
    margin-top: .1rem;
    
    font-size: .24rem;
    line-height: .45rem;
    color: #ffba25
}

.swiper-list2 .item {
    padding-left: .2rem;
    margin-top: .2rem
}

.swiper-list2 .item .pictrue {
    position: relative;
    width: 2.5rem;
    height: 1.4rem
}

.swiper-list2 .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.swiper-list2 .item .pictrue .label {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    padding-right: .11rem;
    padding-left: .11rem;
    border-radius: .03rem;
    background-color: rgba(0, 0, 0, .5);
    
    font-size: .22rem;
    line-height: .34rem;
    color: #fff
}

.swiper-list2 .item .underline {
    -webkit-flex: 1;
    flex: 1;
    padding-right: .2rem;
    padding-left: .24rem
}

.swiper-list2 .item .text-pic {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap
}

.swiper-list2 .item .text-pic .name {
    
    font-size: .32rem;
    line-height: .45rem;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.swiper-list2 .item .text-pic .notes {
    font-size: .28rem;
    color: #989898
}

.swiper-list2 .item .text-pic .bottom {
    height: .45rem;
    margin-top: .09rem
}

.swiper-list2 .item .text-pic .bottom .free {
    margin-top: 0
}

.swiper-list2 .item .text-pic .num {
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff
}

.swiper-list2 .item .text-pic .num ~ .num {
    margin-left: .14rem
}

.swiper-list2 .item .text-pic .money {
    height: .45rem;
    margin-top: .15rem;
    
    font-size: .24rem;
    line-height: .45rem;
    color: #ff4a4a
}

.swiper-list2 .item .text-pic .money span {
    font-size: .32rem
}

.swiper-list2 .item .text-pic .free {
    height: .45rem;
    margin-top: .15rem;
    
    font-size: .24rem;
    line-height: .45rem;
    color: #ffba25
}

.swiper-details .banner {
    height: 4.2rem
}

.swiper-details .banner .swiper-slide {
    width: 100%;
    height: 100%
}

.swiper-details .banner .swiper-slide img {
    width: 100%;
    height: 100%
}

.swiper-details .banner .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    border-radius: .05rem;
    background-color: #b4b4b4;
    opacity: .5
}

.swiper-details .banner .swiper-pagination {
    bottom: 0
}

.swiper-details .banner .swiper-pagination-bullet-active {
    width: .2rem;
    height: .1rem;
    border-radius: .05rem;
    background-color: #2c8eff;
    opacity: 1
}

.swiper-details .swiper .swiper-int {
    padding: .25rem .3rem .13rem
}

.swiper-details .swiper .swiper-int .swiper-int-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.swiper-details .swiper .swiper-int .swiper-int-top-left {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.swiper-details .swiper .swiper-int .swiper-int-top .collect {
    width: 3em;
    margin-left: .16rem
}

.swiper-details .swiper .swiper-int .name {
    font-size: .32rem;
    line-height: .5rem;
    color: #333
}

.swiper-details .swiper .swiper-int .attr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: .17rem
}

.swiper-details .swiper .swiper-int .attr div {
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .03rem;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .24rem;
    line-height: .4rem;
    color: #2c8eff
}

.swiper-details .swiper .swiper-int .attr div ~ div {
    margin-left: .14rem
}

.swiper-details .swiper .swiper-int .infor {
    font-size: .28rem;
    color: #999
}

.swiper-details .swiper .swiper-int .pin-money {
    font-size: .24rem;
    color: #ff4a4a
}

.swiper-details .swiper .swiper-int .pin-money .money {
    font-size: .36rem;
    margin-left: .1rem
}

.swiper-details .swiper .swiper-int .num {
    font-size: .24rem;
    color: #999;
    width: 1.15rem;
    height: .35rem;
    border-radius: .5rem;
    border: 1px solid #999;
    margin-top: .1rem
}

.swiper-details .swiper .swiper-int .num ~ .num {
    margin-left: .15rem
}

.swiper-details .swiper .swiper-int .collect {
    
    font-size: .2rem;
    line-height: .28rem;
    color: #999;
    text-align: center
}

.swiper-details .swiper .swiper-int .collect .knowledge {
    font-size: .38rem;
    line-height: 1;
    color: #666;
    margin-bottom: .08rem
}

.swiper-details .swiper .swiper-int .collect .knowledge.iconshoucang2 {
    color: #feb720
}

.swiper-details .swiper .swiper-int > .acea-row {
    margin-top: .14rem
}

.swiper-details .swiper .swiper-int > .acea-row .collect {
    font-size: .24rem;
    line-height: normal;
    color: #999
}

.swiper-details .swiper .peopleNum {
    padding: .18rem .28rem .2rem .33rem;
    border-top: 1px solid rgba(229, 229, 229, .75)
}

.swiper-details .swiper .peopleNum .pictrue {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.swiper-details .swiper .peopleNum .pictrue img {
    width: .56rem;
    height: .56rem;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    vertical-align: middle
}

.swiper-details .swiper .peopleNum .pictrue img ~ img {
    margin-left: .1rem
}

.swiper-details .swiper .peopleNum .iconfont {
    font-size: .25rem;
    color: #999;
    margin-left: .3rem
}

.swiper-details .swiper .peopleNum .text {
    
    font-size: .28rem;
    color: #999
}

.swiper-details .swiper-nav .navCon .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .96rem;
    font-size: .3rem;
    line-height: .96rem;
    text-align: center;
    color: #333;
    cursor: pointer
}

.swiper-details .swiper-nav .navCon .item.on::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.26rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.swiper-details .swiper-nav .navCon .item.on {
    
    font-size: .32rem;
    color: #2c8eff
}

.thematic-details .swiper-details .swiper-nav {
    margin-top: .14rem;
    background-color: #fff
}

.swiper-details .swiper-conter {
    padding: .3rem;
    background-color: #fff
}

.swiper-details .swiper-conter img {
    display: block;
    width: 100%
}

.swiper-details .video-list .title {
    font-size: .3rem;
    color: #333;
    height: .6rem;
    line-height: .6rem;
    background-color: #f2f2f2;
    font-weight: bold;
    padding: 0 .3rem
}

.swiper-details .video-listn .item {
    padding-left: .3rem
}

.swiper-details .video-listn .item ~ .item {
    margin-top: .3rem
}

.swiper-details .video-listn .item .underline {
    -webkit-flex: 1;
    flex: 1;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    min-width: 0;
    padding-right: .3rem;
    padding-left: .24rem
}

.swiper-details .video-listn .item .pictrue {
    width: 2.5rem;
    height: 1.4rem
}

.swiper-details .video-listn .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.swiper-details .video-listn .item .pictrue .label {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    padding-right: .11rem;
    padding-left: .11rem;
    border-radius: .03rem;
    background-color: rgba(0, 0, 0, .5);
    
    font-size: .22rem;
    line-height: .34rem;
    color: #fff
}

.swiper-details .video-listn .item .text .name {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .3rem;
    line-height: .42rem;
    color: #333;
    font-weight: 400
}

.swiper-details .video-listn .item .text .attr {
    display: -webkit-flex;
    display: flex;
    margin-top: .08rem
}

.swiper-details .video-listn .item .text .attr div {
    padding-right: .08rem;
    padding-left: .08rem;
    border-radius: .03rem;
    background-color: rgba(44, 142, 255, .06);
    margin-left: .14rem;
    
    font-size: .24rem;
    line-height: .4rem;
    color: #2c8eff
}

.swiper-details .video-listn .item .text .attr div:first-child {
    margin-left: 0
}

.swiper-details .video-listn .item .text .free {
    width: .86rem;
    border-radius: .19rem;
    margin-top: .19rem;
    background-color: rgba(254, 183, 32, .1);
    
    font-size: .22rem;
    line-height: .38rem;
    text-align: center;
    color: #feb720
}

.swiper-details .video-listn .item .text .price {
    margin-top: .12rem;
    font-size: .24rem;
    line-height: .45rem;
    color: #ff4a4a
}

.swiper-details .video-listn .item .text .price span {
    
    font-size: .32rem
}

.swiper-details .video-listn .item .text .num {
    font-size: .3rem;
    color: #999
}

.swiper-details .video-listn .item .text .num .iconfont {
    font-size: .3rem;
    margin-right: .13rem
}

.swiper-details .video-listn .item .text .num .see {
    font-size: .22rem;
    color: #157dfa;
    width: .6rem;
    height: .3rem;
    border: 1px solid #157dfa;
    margin-left: .05rem
}

.swiper-details .successTip {
    position: absolute;
    top: .2rem;
    z-index: 5;
    left: .2rem;
    overflow: hidden;
    height: .75rem !important
}

.swiper-details .successTip .picTxt {
    color: #fff;
    font-size: .24rem;
    width: 4rem;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
    padding: 0 .1rem;
    height: 100%
}

.swiper-details .successTip .pictrue {
    width: .6rem;
    height: .6rem
}

.swiper-details .successTip .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.swiper-details .successTip .name {
    max-width: .8rem;
    margin-left: .2rem
}

.teamwork .list {
    padding: 0 .3rem 0 .21rem;
    margin: .29rem auto .15rem auto
}

.teamwork .list .pictrue {
    width: .6rem;
    height: .6rem;
    margin-left: .09rem;
    position: relative;
    margin-bottom: .1rem
}

.teamwork .list .pictrue .king {
    width: .51rem;
    height: .37rem;
    position: absolute;
    top: -0.23rem;
    left: -0.13rem;
    z-index: -1
}

.teamwork .list .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.teamwork .tiptime {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    text-align: center
}

.teamwork .tiptime .time {
    color: #ea2f2f
}

.teamwork .listSuccess {
    padding: 0 .3rem 0 0
}

.teamwork .listSuccess .pictrue {
    margin-left: .3rem
}

.teamwork .listSuccess .pictrue {
    width: .74rem;
    height: .74rem
}

.teamwork .listSuccess .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.teamwork .listSuccess .pictrue .king {
    top: -0.22rem;
    left: -0.07rem
}

.course-list .header {
    width: 100%;
    height: 3.5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

.initiate-group .header {
    padding: .26rem .2rem
}

.initiate-group .header .text-pic {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.initiate-group .header .text-pic .pictrue {
    width: 2.2rem;
    height: 1.232rem;
    border-radius: .1rem;
    overflow: hidden
}

.initiate-group .header .text-pic .pictrue img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.initiate-group .header .text-pic .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem;
    font-size: .28rem;
    line-height: .4rem;
    font-weight: 400
}

.initiate-group .header .text-pic .text .money {
    margin-top: .35rem;
    
    font-size: .24rem;
    color: #ff4a4a
}

.initiate-group .header .text-pic .text .money span {
    font-size: .32rem
}

.initiate-group .header .label {
    font-size: .3rem;
    color: #ea2f2f;
    font-weight: bold;
    width: 1.15rem;
    height: 1.15rem;
    border: .04rem solid #ea2f2f;
    border-radius: 50%;
    padding: 0 .1rem;
    text-align: center;
    background-color: #fff
}

.initiate-group .bnt {
    font-size: .32rem;
    color: #333;
    width: 3rem;
    height: 1rem;
    border-radius: .1rem;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    margin-top: .4rem
}

.initiate-group .bnt.invite {
    margin-left: .29rem;
    background-color: #ea2f2f;
    color: #fff;
    border-color: #ea2f2f
}

.initiate-group .service {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background-color: #509efb;
    font-size: .24rem;
    color: #fff;
    font-weight: bold;
    flex-direction: column;
    position: fixed;
    right: .35rem;
    bottom: 1.88rem
}

.initiate-group .service .iconfont {
    font-weight: normal;
    font-size: .4rem;
    margin-bottom: -0.09rem
}

.initiate-group2 .list {
    padding: 0 .3rem 0 .2rem;
    margin: .47rem auto .2rem auto
}

.initiate-group2 .list .pictrue {
    width: .79rem;
    height: .79rem;
    margin-left: .13rem;
    position: relative;
    margin-bottom: .1rem
}

.initiate-group2 .list .pictrue .king {
    width: .51rem;
    height: .37rem;
    position: absolute;
    top: -0.23rem;
    left: -0.05rem;
    z-index: -1
}

.initiate-group2 .list .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.initiate-group2 .tiptime {
    text-align: center;
    font-size: .32rem;
    color: #333;
    font-weight: bold
}

.initiate-group2 .tiptime2 {
    margin-bottom: .27rem
}

.initiate-group2 .tiptime .time {
    color: #ea2f2f
}

.initiate-group2 footer {
    height: 1.28rem;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    padding: 0 .3rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.initiate-group2 footer .open-group {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    width: 2.77rem;
    height: 1rem;
    border: 1px solid #d9d9d9;
    border-radius: .15rem
}

.initiate-group2 footer .goin-group {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    width: 3.9rem;
    height: 1rem;
    background-color: #fbdc46;
    border-radius: .15rem
}

.user .header {
    height: 1.6rem;
    background-color: #fff;
    padding: 0 .3rem 0 .52rem
}

.user .header .pic-text {
    width: 5.85rem
}

.course-list .nav::-webkit-scrollbar {
    display: none
}

.user .header .pic-text .pictrue {
    width: 1rem;
    height: 1rem
}

.user .header .pic-text .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.user .header .pic-text .name {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    width: 4.57rem
}

.user .header .iconfont {
    color: #000;
    font-size: .35rem
}

.user .list {
    background-color: #fff;
    margin-top: .2rem
}

.user .list .item {
    padding: 0 .26rem;
    font-size: .32rem;
    color: #333;
    height: 1rem;
    border-bottom: 1px solid #e6e6e6
}

.user .list .item .pictrue {
    width: .48rem;
    height: .48rem
}

.user .list .item .pictrue img {
    width: 100%;
    height: 100%
}

.user .list .item .name {
    width: 6.28rem
}

.user .quit {
    font-size: .36rem;
    color: #509efb;
    font-weight: bold;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
    background-color: #fff;
    margin-top: .4rem
}

.personal-infor-set .header {
    height: 1.8rem;
    padding: 0 .3rem;
    font-size: .32rem;
    color: #333;
    border-bottom: .2rem solid #f2f2f2
}

.personal-infor-set .header .pictrue {
    width: 1rem;
    height: 1rem
}

.personal-infor-set .header .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.personal-infor-set .header .iconfont {
    margin-left: .2rem;
    font-size: .35rem;
    color: #333;
    font-weight: normal
}

.personal-infor-set .list .item {
    padding: 0 .3rem;
    height: 1.02rem;
    font-size: .32rem;
    color: #333;
    border-bottom: 1px solid #e6e6e6
}

.personal-infor-set .list .item .name {
    width: 4.2rem;
    color: #999;
    margin-right: .23rem;
    text-align: right
}

.personal-infor-set .list .item .iconfont {
    color: #999;
    font-size: .35rem;
    vertical-align: middle
}

.replace-phone .list {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: .15rem;
    width: 5.5rem;
    height: 2rem;
    margin: .3rem auto
}

.replace-phone .list .item {
    height: 1rem
}

.replace-phone .list .item ~ .item {
    border-top: 1px solid #e6e6e6
}

.replace-phone .list .item input {
    height: 100%;
    width: 100%;
    padding: 0 .26rem;
    font-size: .3rem
}

.replace-phone .list .item input::placeholder {
    color: #ccc
}

.replace-phone .list .item.itemCode {
    padding-right: .18rem
}

.replace-phone .list .item.itemCode input {
    width: 2.8rem
}

.replace-phone .list .item .code {
    color: #509efb;
    font-size: .28rem;
    height: 100%
}

.replace-phone .list .item .code.on {
    color: #999
}

.replace-phone .bnt {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    background-color: #f9e067;
    border-radius: .15rem;
    text-align: center;
    line-height: 1rem;
    height: 1rem;
    width: 5.5rem;
    margin: .4rem auto
}

.index .search {
    font-size: .3rem;
    color: #999;
    width: 6.9rem;
    height: .7rem;
    background-color: #f2f2f2;
    border-radius: .1rem;
    margin: .18rem auto .4rem auto
}

.index .search .iconfont {
    margin-right: .15rem;
    font-size: .38rem
}

.index nav {
    margin: .3rem 0 .26rem 0
}

.index nav .item {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: .28rem;
    color: #333
}

.index nav .item .pictrue {
    width: .81rem;
    height: .81rem;
    margin: 0 auto .12rem auto
}

.index nav .item .pictrue img {
    width: 100%;
    height: 100%
}

.index .swiper-details .banner {
    width: 6.9rem;
    height: 2.4rem;
    margin: 0 auto
}

.index .studyCourse .title {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    padding: 0 .3rem;
    height: .97rem;
    line-height: .97rem
}

.index .studyCourse .swiper-list2 {
    padding-top: .2rem
}

.index .studyCourse .swiper-list2 .item:nth-last-of-type(1) .underline {
    border-bottom: 0
}

.index .studyCourse .swiper-list2 .item:first-child {
    margin-top: 0
}

.index .studyCourse .swiper-list3 {
    margin-top: 0
}

.index .studyCourse .swiper-list3 .item {
    padding: 0 .3rem;
    margin-bottom: .3rem
}

.course-list.index .studyCourse .swiper-list3 .pictrue {
    width: 100%;
    height: 3.8rem
}

.index .studyCourse .swiper-list3 .pictrue img {
    border-radius: .1rem .1rem 0 0
}

.index .studyCourse .swiper-list3 .text-pic {
    width: 100%;
    padding-right: .2rem;
    padding-bottom: .2rem;
    padding-left: .2rem;
    border-bottom-right-radius: .1rem;
    border-bottom-left-radius: .1rem;
    box-shadow: 0 .03rem .1rem rgba(0, 0, 0, .06)
}

.index .studyCourse .swiper-list3 .text-pic .name {
    margin-top: .2rem
}

.index .studyCourse .list {
    padding: 0 .3rem
}

.index .studyCourse .list .item {
    width: 100%;
    height: 2.54rem;
    margin-bottom: .3rem
}

.index .studyCourse .list .item img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.search-page .header {
    padding: 0 .16rem 0 .3rem;
    height: 1.12rem;
    background-color: #fff
}

.search-page .header .searchBnt {
    width: 1.3rem;
    color: #509efb;
    font-size: .3rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center
}

.search-page .header .input {
    width: 5.67rem;
    height: .7rem;
    background-color: #f2f2f2;
    border-radius: .13rem;
    padding: 0 .27rem;
    font-size: .3rem;
    color: #333
}

.search-page .header .input .iconfont {
    color: #a8a8a8;
    font-size: .35rem;
    margin-top: .05rem
}

.search-page .header .input input {
    width: 4.67rem;
    height: 100%
}

.search-page .header .input input::placeholder {
    color: #999
}

.search-page .hotSearch .title {
    font-size: .36rem;
    color: #000;
    font-weight: bold;
    height: .92rem;
    line-height: .92rem;
    padding: 0 .3rem
}

.search-page .hotSearch .list {
    padding: 0 .3rem 0 .12rem
}

.search-page .hotSearch .list .item {
    font-size: .3rem;
    color: #333;
    font-weight: bold;
    background-color: #fff;
    border-radius: .1rem;
    text-align: center;
    line-height: .66rem;
    height: .66rem;
    min-width: 1.59rem;
    margin: 0 0 .26rem .18rem
}

.search-page .searchResult {
    background-color: #fff
}

.search-page .searchResult .title {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    padding: 0 .3rem;
    height: .66rem;
    background-color: #f2f2f2
}

.search-page .searchResult .more {
    font-size: .3rem;
    color: #333;
    padding: 0 .38rem;
    height: .75rem
}

.search-page .searchResult .video-listn .item .text .num {
    margin-top: .05rem
}

.extension .header {
    background-color: #2c8eff;
    width: 100%;
    height: 2.85rem;
    color: #fff;
    font-size: .28rem;
    position: relative
}

.extension .header .money {
    font-size: .72rem;
    font-weight: bold
}

.extension .header .iconfont {
    font-size: .2rem;
    margin-left: .05rem
}

.extension .header .cashBnt {
    position: absolute;
    width: 1.4rem;
    height: .6rem;
    border-radius: .5rem;
    background-color: #f2f2f2;
    text-align: center;
    line-height: .6rem;
    font-size: .24rem;
    color: #2c8eff;
    right: .3rem
}

.extension nav {
    height: 1.92rem
}

.extension nav .item {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: .3rem;
    color: #999
}

.extension nav .item .num {
    font-size: .48rem;
    color: #333;
    font-weight: bold
}

.extension nav .item ~ .item {
    border-left: 1px solid #e6e6e6
}

.extension .list {
    border-top: .2rem solid #f2f2f2
}

.extension .list .item {
    height: 1.01rem;
    border-bottom: 1px solid #e6e6e6;
    font-size: .32rem;
    color: #333;
    padding: 0 .3rem;
    position: relative
}

.extension .list .item .spot {
    position: absolute;
    width: .12rem;
    height: .12rem;
    background-color: #ea2f2f;
    border-radius: 50%;
    left: 1.7rem;
    top: .3rem
}

.extension .list .item .spot.spotr {
    left: 1.9rem
}

.cash-withdrawal {
    font-size: .3rem;
    color: #333;
    padding: .54rem 1.25rem
}

.cash-withdrawal .money {
    font-size: .79rem;
    color: #333;
    font-weight: bold
}

.cash-withdrawal .money input {
    width: 4.3rem;
    border-bottom: 1px solid #999;
    margin-left: .17rem;
    text-align: center;
    font-weight: bold
}

.cash-withdrawal .tip {
    margin-top: .35rem
}

.cash-withdrawal .tip .all {
    color: #509efb
}

.cash-withdrawal button {
    font-size: .32rem;
    color: #fff;
    width: 100%;
    height: 1rem;
    background-color: #49a839;
    text-align: center;
    line-height: 1rem;
    border-radius: .1rem;
    margin-top: .75rem
}

.withdrawals-record .data {
    height: .88rem;
    font-size: .32rem;
    color: #333;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 .3rem
}

.withdrawals-record .data .iconfont {
    font-size: .2rem;
    margin-left: .08rem
}

.withdrawals-record .data input {
    height: 100%;
    width: 1.8rem
}

.withdrawals-record .list .item {
    height: 1.43rem;
    padding: 0 .3rem;
    border-bottom: 1px solid #e6e6e6;
    font-size: .32rem;
    color: #333
}

.withdrawals-record .list .item .time {
    font-size: .28rem;
    color: #999;
    margin-top: -0.08rem
}

.withdrawals-record .list .item .money {
    font-size: .36rem;
    color: #ea2f2f;
    font-weight: bold
}

.withdrawals-record .loadTip {
    font-size: .28rem;
    color: #999;
    text-align: center;
    height: .83rem;
    line-height: .83rem
}

.my-course .header {
    height: 1.17rem
}

.my-course .header .nav {
    border-radius: .1rem;
    border: 1px solid #509efb
}

.my-course .header .item {
    width: 2.2rem;
    height: .68rem;
    text-align: center;
    line-height: .68rem;
    font-size: .3rem;
    color: #509efb
}

.my-course .header .item.on {
    background-color: #509efb;
    color: #fff
}

.my-course .header .item:nth-of-type(2) {
    border-radius: 0 .1rem .1rem 0
}

.my-course .header .item:nth-of-type(1) {
    border-radius: .1rem 0 0 .1rem
}

.my-course .swiper-list2 {
    border-top: .2rem solid #f2f2f2
}

.my-course .swiper-list2 .loadTip {
    font-size: .28rem;
    color: #999;
    text-align: center;
    height: .83rem;
    line-height: .83rem
}

.my-spelling-order .video-listn .list {
    border-bottom: .2rem solid #f2f2f2;
    padding: 0 .3rem
}

.my-spelling-order .video-listn .list .item {
    padding: .33rem 0;
    border-bottom: 1px solid #e6e6e6
}

.my-spelling-order .video-listn .list .item .text .num {
    font-size: .24rem;
    color: #999;
    font-weight: normal
}

.my-spelling-order .video-listn .list .item .text .num .money {
    font-size: .32rem;
    color: #ea2f2f;
    font-weight: bold;
    margin-left: .2rem
}

.my-spelling-order .video-listn .list .bottom {
    height: .9rem;
    font-size: .3rem;
    color: #333
}

.my-spelling-order .video-listn .list .status {
    width: 2.95rem
}

.my-spelling-order .video-listn .list .bottom .time {
    color: #999
}

.my-spelling-order .loadTip {
    font-size: .28rem;
    color: #999;
    text-align: center;
    height: .83rem;
    line-height: .83rem
}

.assemble .header {
    height: 1.57rem;
    background-color: #fff;
    padding: 0 .45rem
}

.assemble .header .item {
    font-size: .28rem;
    color: #333;
    text-align: center
}

.assemble .header .item .iconfont {
    font-size: .5rem;
    width: .6rem;
    height: .75rem;
    margin: 0 auto
}

.assemble .header .icon-weixinzhifu {
    color: #70c97f
}

.assemble .header .icon-yaoqing- {
    color: #e3706b
}

.assemble .header .icon-bofang1 {
    color: #74b7ec;
    font-size: .4rem !important
}

.assemble .header .icon-icon-yxj-arrow-right {
    font-size: .4rem;
    color: #ccc !important
}

.assemble .teamwork {
    position: relative;
    padding: .3rem;
    margin-top: .14rem;
    background-color: #fff
}

.assemble .teamwork .list {
    min-height: 1.15rem;
    padding: 0 .09rem 0 0;
    margin: 0
}

.assemble .teamwork div.label {
    top: .2rem;
    right: .2rem
}

.assemble .my-course {
    margin-top: .14rem;
    background-color: #fff
}

.assemble .my-course .swiper-list2 {
    border-top: 0
}

.assemble .my-course .swiper-list2 .item {
    padding: .2rem
}

.assemble .my-course .swiper-list2 .item .pictrue {
    width: 3.45rem;
    height: 1.92rem;
    border-radius: .1rem;
    overflow: hidden
}

.assemble .my-course .swiper-list2 .item .pictrue img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.assemble .my-course .swiper-list2 .item .text-pic {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem
}

.assemble .my-course .swiper-list2 .item .text-pic .name {
    font-size: .28rem;
    line-height: .4rem
}

.assemble .my-course .swiper-list2 .item .text-pic .label {
    margin-top: .12rem
}

.assemble .my-course .swiper-list2 .item .text-pic .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
    margin-top: 0
}

.assemble .my-course .swiper-list2 .item .text-pic .money {
    margin-top: 0
}

.assemble .my-course .swiper-list2 .item .text-pic .money span {
    font-size: .32rem
}

.assemble .my-course .swiper-list2 .item .text-pic .free {
    
    font-size: .24rem;
    line-height: .45rem;
    color: #ffba25
}

.assemble .initiate-group {
    margin-top: .7rem
}

.assemble .initiate-group .invite {
    width: 6.9rem;
    height: .9rem;
    border: 0;
    border-radius: .45rem;
    background-color: #539dfd;
    font-size: .32rem;
    line-height: .9rem;
    text-align: center;
    color: #fff
}

.assemble .lessonBnt {
    font-size: .32rem;
    color: #fff;
    background-color: #ea2f2f;
    border-radius: .1rem;
    width: 6.9rem;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    margin: .3rem auto
}

.assemble .teamwork .label {
    position: absolute;
    right: .1rem;
    top: .26rem;
    font-size: .3rem;
    color: #ea2f2f;
    font-weight: bold;
    width: 1.15rem;
    height: 1.15rem;
    border: .04rem solid #ea2f2f;
    border-radius: 50%;
    padding: 0 .1rem;
    text-align: center;
    background-color: #fff
}

.assemble footer {
    height: 1.28rem;
    background-color: #fff;
    border-top: 1px solid #e6e6e6;
    padding: 0 .3rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.assemble footer .goin-group {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    width: 6.9rem;
    height: 1rem;
    background-color: #fbdc46;
    border-radius: .15rem
}

.my-promoter nav {
    height: 1.92rem;
    background-color: #fff
}

.my-promoter nav .item {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    font-size: .3rem;
    color: #999
}

.my-promoter nav .item .num {
    font-size: .48rem;
    color: #333;
    font-weight: bold
}

.my-promoter nav .item ~ .item {
    border-left: 1px solid #e6e6e6
}

.my-promoter .search {
    width: 6.9rem;
    height: .7rem;
    background-color: #fff;
    border-radius: .1rem;
    margin: .15rem auto
}

.my-promoter .search .iconfont {
    color: #999;
    font-size: .35rem;
    margin-top: .06rem
}

.my-promoter .search .input {
    font-size: .3rem;
    height: 100%;
    width: .8rem;
    text-align: center
}

.my-promoter .search input::placeholder {
    color: #999
}

.my-promoter .search .input.on {
    text-align: left;
    padding: 0 .1rem;
    width: 6rem
}

.my-promoter .list {
    font-size: .3rem;
    color: #333
}

.my-promoter .list .nav {
    background-color: #fff;
    height: 1rem
}

.my-promoter .list .nav .item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    position: relative;
    text-align: center
}

.my-promoter .list .nav .item.item4 .icon {
    left: 1.67rem
}

.my-promoter .list .nav .item.item1 {
    width: 1.5rem
}

.my-promoter .list .nav .item.item2 {
    width: 2.25rem
}

.my-promoter .list .nav .item.item3 {
    width: 1.6rem
}

.my-promoter .list .nav .item.item4 {
    width: 2.15rem
}

.my-promoter .list .listcon {
    background-color: #fff
}

.my-promoter .list .listcon .item {
    text-align: center;
    height: 1.01rem;
    border-bottom: 1px solid #e6e6e6;
    line-height: 1.01rem;
    font-size: .28rem
}

.my-promoter .list .listcon .item.item1 {
    width: 1.5rem
}

.my-promoter .list .listcon .item.item2 {
    width: 2.25rem
}

.my-promoter .list .listcon .item.item3 {
    width: 1.6rem
}

.my-promoter .list .listcon .item.item4 {
    width: 2.15rem
}

.my-promoter .footer {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background-color: #509efb;
    position: fixed;
    bottom: 0;
    font-size: .32rem;
    z-index: 9
}

.my-promoter .footer .increase {
    width: 50%;
    text-align: center;
    color: #fff
}

.my-promoter .footer .increase.increase1 {
    background-color: #fff;
    color: #509efb
}

.promotion-poster .tip {
    font-size: .32rem;
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin: .45rem auto .27rem auto
}

.promotion-poster .pictrue {
    width: 4.63rem;
    height: 8.23rem;
    margin: 0 auto
}

.promotion-poster .pictrue img {
    width: 100%;
    height: 100%
}

.promotion-poster .shareBnt {
    font-size: .32rem;
    color: #333;
    width: 3.55rem;
    height: .8rem;
    text-align: center;
    line-height: .8rem;
    background-color: #fff;
    border-radius: .15rem;
    margin: .4rem auto .35rem auto
}

.promotion-poster .notes {
    font-size: .28rem;
    color: #fff;
    padding: 0 .25rem
}

.promotion-poster .notes .title {
    margin-bottom: .05rem;
    font-weight: bold
}

.become-promoter .phone {
    background-color: #fff;
    padding: .25rem 0 .01rem 0
}

.become-promoter .phone .list {
    padding: 0 1.25rem
}

.become-promoter .phone .list .item {
    border-bottom: 1px solid #999;
    padding: .33rem 0 .18rem 0
}

.become-promoter .phone .list .item .code {
    width: 1.56rem;
    height: .53rem;
    background-color: #509efb;
    color: #fff;
    font-size: .26rem;
    border-radius: .1rem
}

.become-promoter .phone .list .item .code.on {
    background-color: #bbb
}

.become-promoter .phone .list .item input {
    font-size: .3rem;
    height: .53rem
}

.become-promoter .phone .list .item input::placeholder {
    color: #999
}

.become-promoter .phone .list .item.itemCode input {
    width: 3.1rem
}

.become-promoter .phone .bnt {
    font-size: .32rem;
    color: #fff;
    width: 5rem;
    height: 1rem;
    background-color: #509efb;
    border-radius: .1rem;
    margin: .54rem auto
}

.become-promoter .rule {
    font-size: .28rem;
    color: #333;
    padding: 0 .3rem;
    line-height: 1.7
}

.become-promoter .rule .title {
    font-weight: bold;
    padding: .25rem 0 .1rem 0
}

.my-gift .video-listn .list .item .text .num .money {
    margin-left: 0
}

.my-gift .video-listn .list .bottom .time.goBnt {
    width: 1.41rem;
    height: .6rem;
    background-color: #ea2f2f;
    border-radius: .1rem;
    font-size: .3rem;
    color: #fff
}

.commission-details header {
    height: 2.19rem;
    font-size: .28rem;
    color: #333
}

.commission-details header .money {
    font-weight: bold;
    font-size: .72rem
}

.commission-details .commission {
    border-top: .2rem solid #f2f2f2;
    font-size: .3rem;
    border-bottom: .2rem solid #f2f2f2
}

.commission-details .commission .title {
    color: #333;
    font-weight: bold;
    height: .9rem;
    padding: 0 .3rem;
    border-bottom: 1px solid #e6e6e6
}

.commission-details .commission .list .item {
    flex: 1;
    -webkit-flex: 1;
    text-align: center;
    padding: 0 .3rem;
    margin: .4rem 0;
    color: #999
}

.commission-details .commission .list .item ~ .item {
    border-left: 1px solid #e6e6e6
}

.commission-details .commission .list .item .money {
    font-size: .48rem;
    color: #333;
    font-weight: bold
}

.commission-details .commission .list .item .iconfont {
    color: #999;
    font-size: .3rem
}

.promotion-details .list .item {
    height: 1.46rem
}

.promotion-details .list .item .title {
    width: 3.4rem
}

.promotion-details .list .item .name {
    width: 2.5rem;
    text-align: right;
    color: #999
}

.promotion-details .list .item .time {
    margin-top: 0
}

.promotion-details .list .item .money {
    color: #49a839
}

.present-topics {
    padding: 0 .3rem
}

.present-topics .white {
    background-color: #fff;
    border-radius: .15rem;
    width: 100%;
    padding: .43rem 0 .22rem 0;
    margin-top: .4rem
}

.present-topics .white .pictrue {
    width: 1.28rem;
    height: 1.28rem;
    margin: 0 auto
}

.present-topics .white .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.present-topics .white .tip {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-top: .15rem
}

.present-topics .white .giftName {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    text-align: center;
    margin-top: .05rem
}

.present-topics .white .pictrue2 {
    width: 6.36rem;
    height: 2.72rem;
    margin: .15rem auto 0 auto
}

.present-topics .white .pictrue2 img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.present-topics .white .sendBnt {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    width: 6.14rem;
    height: 1rem;
    background-color: #f9e067;
    border-radius: .1rem;
    margin: .46rem auto 0 auto
}

.present-topics .white .see {
    font-size: .32rem;
    color: #333;
    text-align: center;
    margin-top: .1rem
}

.present-topics .pictrue3 {
    width: 100%;
    height: 2.89rem;
    margin: .3rem auto
}

.present-topics .pictrue3 img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.thematic-promotion nav {
    font-size: .32rem;
    color: #333;
    font-weight: bold;
    height: .97rem;
    justify-content: space-around;
    -webkit-justify-content: space-around
}

.thematic-promotion nav .item {
    height: 100%;
    line-height: .92rem
}

.thematic-promotion nav .item.ont {
    color: #509efb
}

.thematic-promotion nav .on {
    width: .3rem;
    height: .05rem;
    background-color: #157dfa;
    border-radius: .15rem;
    margin: 0 auto
}

.thematic-promotion .swiper-details {
    background-color: #fff
}

.thematic-promotion .swiper-details ~ .swiper-details {
    margin-top: .14rem
}

.thematic-promotion .swiper-details .title {
    height: .98rem;
    padding-right: .2rem;
    padding-left: .2rem;
    
    font-size: .32rem
}

.thematic-promotion .swiper-details .video-listn {
    border-top: 1px solid #f5f5f5;
    padding: .26rem .2rem
}

.thematic-promotion .swiper-details .video-listn .item {
    position: relative;
    padding-left: 0
}

.thematic-promotion .swiper-details .video-listn .item ~ .item {
    margin-top: .26rem
}

.thematic-promotion .swiper-details .video-listn .item .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem
}

.thematic-promotion .swiper-details .video-listn .item .text .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .4rem
}

.thematic-promotion .swiper-details .video-listn .item .text .num {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: .24rem;
    color: #ff4a4a;
    font-weight: 500
}

.thematic-promotion .swiper-details .video-listn .item .text .num .money span {
    font-size: .32rem;
    line-height: .45rem
}

.thematic-promotion .swiper-details .video-listn .item .text .num .earn {
    font-size: .48rem;
    color: #ff4a4a;
    height: .64rem;
    padding: 0 .22rem;
    border: .02rem solid #ff4a4a;
    border-radius: 1rem;
    margin-left: .14rem;
    transform: scale(0.5);
    line-height: .6rem;
    transform-origin: 0 50%;
    font-weight: normal
}

.thematic-promotion .swiper-details .video-listn .item .toPromote {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.4rem;
    height: .5rem;
    border-radius: .25rem;
    background-color: #2c8eff;
    
    font-size: .24rem;
    line-height: .5rem;
    text-align: center;
    color: #fff
}

.promotion-poster2 {
    padding-top: 1.59rem
}

.promotion-poster2 .tip {
    margin: .4rem auto 0 auto
}

.promotion-poster2 .shareBnt {
    margin: .2rem auto 0 auto
}

.thematic-details .swiper-details .swiper {
    background-color: #fff
}

.thematic-details .follow {
    padding: 0 .3rem;
    height: 1.2rem
}

.thematic-details .follow .picTxt {
    width: 4.7rem
}

.thematic-details .follow .picTxt .pictrue {
    width: .85rem;
    height: .85rem
}

.thematic-details .follow .picTxt .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: .15rem
}

.thematic-details .follow .picTxt .text {
    width: 3.65rem;
    font-size: .28rem;
    color: #509efb
}

.thematic-details .follow .picTxt .text .name {
    font-weight: bold
}

.thematic-details .follow .followBnt {
    font-size: .28rem;
    color: #fff;
    width: 1.36rem;
    height: .6rem;
    background-color: #509efb;
    text-align: center;
    line-height: .6rem;
    border-radius: .5rem
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money .price {
    display: inline-block;
    font-size: .24rem;
    color: #ff4a4a
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money .price b {
    font-size: .32rem;
    line-height: .56rem
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money .vip-price {
    font-size: .28rem;
    color: #282828
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money .vip-price + .vip-price-icon {
    vertical-align: inherit
}

.thematic-details .swiper-details .swiper .swiper-int .pin-money .total {
    margin-left: .1rem;
    font-size: .26rem;
    color: #999
}

.thematic-details .swiper-details .pinTip {
    height: .7rem;
    padding-left: .33rem;
    font-size: .26rem;
    line-height: .7rem
}

.thematic-details .pinTip2 {
    height: .7rem;
    padding-right: .3rem;
    padding-left: .3rem;
    border-radius: .12rem;
    margin: .14rem .2rem;
    background-color: #e2efff
}

.thematic-details .pinTip2 .chatBnt {
    width: 1.36rem;
    height: .46rem;
    border: 1px solid #3895ff;
    border-radius: .23rem;
    background-color: #2c8eff;
    
    font-size: .24rem;
    line-height: .42rem;
    text-align: center;
    color: #f5f5f5;
    cursor: pointer
}

.thematic-details .pinTip2 .reminder {
    
    font-size: .26rem;
    color: #2c8dff
}

.thematic-details .swiper-details .list {
    padding-left: .3rem;
    background-color: #fff
}

.thematic-details .swiper-details .list .item {
    padding-top: .25rem;
    padding-right: .3rem;
    padding-bottom: .25rem
}

.thematic-details .swiper-details .list .item ~ .item {
    border-top: 1px solid #f0f0f0
}

.thematic-details .swiper-details .list .item .pictrue {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: .2rem;
    overflow: hidden
}

.thematic-details .swiper-details .list .item .pictrue img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.thematic-details .swiper-details .list .item .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.thematic-details .swiper-details .list .item .left {
    width: 2.1rem;
    
    font-size: .24rem;
    line-height: .34rem;
    text-align: center
}

.thematic-details .swiper-details .list .item .link {
    width: 1.4rem;
    height: .5rem;
    border-radius: .25rem;
    background-color: #feb720;
    font-size: .24rem;
    line-height: .5rem;
    text-align: center;
    color: #fff
}

.thematic-details .swiper-details .list .item .link .knowledge {
    margin-left: .11rem;
    font-size: .18rem
}

.thematic-details .swiper-details .list .item .left span {
    color: #ff3700
}

.thematic-details .swiper-details .list .item .left .time {
    line-height: .3rem;
    color: #82848f
}

.thematic-details footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    border-top: 1px solid #eee;
    background-color: #fff
}

.thematic-details footer .link {
    width: .9rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center
}

.thematic-details footer .link .cont {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .18rem;
    line-height: .36rem;
    color: #666
}

.thematic-details footer .link img {
    display: block;
    width: .4rem;
    height: .4rem;
    margin-right: auto;
    margin-left: auto
}

.thematic-details footer .wrap {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    padding-right: .3rem;
    padding-left: .3rem
}

.thematic-details footer .item {
    border: .01rem solid #d9d9d9;
    width: 1.33rem;
    height: 1rem;
    border-radius: .1rem;
    font-size: .24rem;
    color: #333
}

.thematic-details footer .item img {
    width: .42rem;
    height: .46rem
}

.thematic-details footer .item.item1 {
    width: 1.87rem
}

.thematic-details footer .item.item2 {
    width: 1.87rem;
    background-color: #f9e067;
    border-color: #f9e067
}

.thematic-details footer .item .money {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    margin-bottom: -0.06rem
}

.thematic-details footer .item.on {
    width: 3.9rem
}

.thematic-details footer .item.on .money {
    margin-bottom: 0
}

.thematic-details .groupCode {
    width: 4.79rem;
    height: 5.74rem;
    background-color: #fff;
    border-radius: .2rem;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -2.395rem;
    margin-top: -2.87rem;
    z-index: 99
}

.thematic-details .groupCode .code {
    width: 3.1rem;
    height: 3.1rem;
    margin: .7rem auto 0 auto
}

.thematic-details .groupCode .code img {
    width: 100%;
    height: 100%
}

.thematic-details .groupCode .codeTip {
    text-align: center;
    margin-top: .4rem;
    font-size: .37rem;
    color: #333
}

.swiper-details .catalogue li {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 1.02rem;
    padding-right: .3rem;
    padding-left: .3rem
}

.swiper-details .catalogue li::before {
    content: " ";
    position: absolute;
    top: 0;
    right: .3rem;
    left: 1.1rem;
    height: 1px;
    border-top: 1px solid #f5f5f5;
    color: #f5f5f5;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
}

.swiper-details .catalogue li:first-child::before {
    display: none
}

.swiper-details .catalogue li.gray {
    color: #999
}

.swiper-details .catalogue .image {
    width: 0.38rem;
    height: 0.27rem;
}

.swiper-details .catalogue .image .img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.swiper-details .catalogue .title {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: .2rem;
    margin-left: .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem
}

.swiper-details .catalogue .free {
    padding-right: .21rem;
    padding-left: .21rem;
    border-radius: .19rem;
    background-color: rgba(254, 183, 32, .1);
    
    font-size: .22rem;
    line-height: .38rem;
    color: #feb720
}

.swiper-details .catalogue .iconsuozi,.swiper-details .catalogue .iconziyuan2 {
    width: .86rem;
    font-size: .3rem;
    text-align: center;
    color: #ccc
}

.swiper-details .parent-catalogue .parent-title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: .26rem .3rem .25rem;
    background-color: rgba(44, 142, 255, .03)
}

.swiper-details .parent-catalogue .parent-title .name {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .3rem;
    line-height: .45rem;
    color: #333
}

.swiper-details .parent-catalogue .parent-title .iconfont {
    font-size: .28rem;
    color: #333
}

.swiper-details .parent-catalogue .catalogue {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    transition: .3s
}

.swiper-details .parent-catalogue .active .catalogue {
    height: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

.thematic-details footer .item.on2 {
    width: 5.39rem
}

.thematic-details .password {
    width: 5.38rem;
    height: 3.22rem;
    background-color: #fff;
    border-radius: .1rem;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -2.69rem;
    margin-top: -1.61rem;
    z-index: 88;
    padding-top: .2rem;
    transition: all .3s ease-in-out;
    opacity: 0;
    transform: scale(0)
}

.thematic-details .password.on {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.thematic-details .password .title {
    font-size: .32rem;
    color: #333;
    text-align: center;
    font-weight: bold
}

.thematic-details .password input {
    width: 4.53rem;
    height: .88rem;
    border-radius: .1rem;
    border: 1px solid #d9d9d9;
    background-color: #f2f2f2;
    display: block;
    margin: .28rem auto 0 auto;
    text-align: center
}

.thematic-details .password .psdBnt {
    font-size: .32rem;
    color: #fff;
    width: 4.62rem;
    height: .8rem;
    border-radius: .1rem;
    background-color: #509efb;
    text-align: center;
    line-height: .8rem;
    margin: .28rem auto 0 auto
}

.select-btn {
    height: .96rem;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 .33rem
}

.select-btn .iconfont {
    color: #3ab034;
    font-size: .4rem;
    margin-right: .15rem;
    vertical-align: middle
}

.checkbox-wrapper {
    position: relative;
    height: 100%;
    line-height: .96rem
}

.checkbox-wrapper input {
    display: none
}

.checkbox-wrapper .icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #cdcdcd;
    border-radius: 50%;
}

.entry {
    width: 100%;
    height: 5.6rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 66;
    transform: translate3d(0, 100%, 0);
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

.entry.up {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.entry .title {
    font-size: .36rem;
    color: #333;
    text-align: center;
    line-height: .87rem;
    height: .87rem;
    position: relative;
    font-weight: bold
}

.entry .title .knowledge {
    position: absolute;
    left: .3rem;
    font-weight: normal;
    font-size: .5rem;
    color: #000
}

.entry .entry-list {
    padding: 0 1rem
}

.entry .entry-list .item {
    height: 1.02rem;
    width: 100%;
    border-bottom: 1px solid #999
}

.entry .entry-list .item input {
    height: 100%;
    width: 100%;
    font-size: .3rem
}

.entry .entry-list .item.item1 input {
    width: 2.65rem
}

.entry .entry-list .item input::placeholder {
    color: #ccc
}

.entry .entry-list .item .code {
    font-size: .28rem;
    color: #509efb
}

.entry .entry-list .item .code.on {
    color: #999
}

.entry .enterBnt {
    width: 5.5rem;
    height: 1rem;
    background-color: #f9e067;
    border-radius: .1rem;
    font-size: .36rem;
    font-weight: bold;
    margin: .5rem auto
}

.entry .checkbox-wrapper .well-check {
    font-size: .24rem;
    color: #999
}

.entry .checkbox-wrapper .well-check a {
    color: #509efb
}

.entry .checkbox-wrapper .icon {
    margin-right: .1rem;
    vertical-align: middle;
}

.entry .checkbox-wrapper input:checked + .icon {
    background-color: #4387ff;
    border-color: #4387ff;
    background-image: url("../images/enter.png");
    -webkit-background-size: .2rem;
    -moz-background-size: .2rem;
    background-size: .2rem;
    background-repeat: no-repeat;
    background-position: center center
}

.entry .select-btn {
    padding: 0 1rem;
    border-bottom: 0;
    height: unset;
    margin-top: .2rem
}

.entry .select-btn .checkbox-wrapper {
    line-height: unset
}

.payment .checkbox-wrapper input:checked + .icon:after {
    content: ' ';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3ab034;
    left: 50%;
    top: 50%;
    margin-top: -4px;
    margin-left: -4px
}

.payment {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    transform: translate3d(0, 150%, 0);
    -webkit-transform: translate3d(0, 150%, 0);
    -moz-transform: translate3d(0, 150%, 0);
    -o-transform: translate3d(0, 150%, 0);
    -ms-transform: translate3d(0, 150%, 0);
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease
}

.payment.up {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0)
}

.payment .title {
    height: .94rem;
    line-height: .94rem;
    text-align: center;
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #e6e6e6
}

.payment .title .knowledge {
    position: absolute;
    font-weight: normal;
    font-size: .36rem;
    color: #000;
    left: .33rem;
    top: 50%;
    transform: translateY(-50%)
}

.payment .total {
    height: .9rem;
    padding: 0 .33rem;
    font-size: .3rem;
    color: #333
}

.payment .total .money {
    color: #e00;
    font-size: .34rem;
    font-weight: bold
}

.payment .mode {
    font-size: .3rem;
    color: gray;
    padding: 0 .33rem;
    background-color: #f2f2f2;
    height: .6rem;
    line-height: .6rem
}

.payment .select-btn {
    border-bottom: 1px solid #e6e6e6;
    padding: 0 .33rem
}

.payment .select-btn .iconfont {
    color: #3ab034;
    font-size: .4rem;
    margin-right: .15rem;
    vertical-align: middle
}

.payment .checkbox-wrapper {
    position: relative;
    height: 100%;
    line-height: .96rem
}

.payment .checkbox-wrapper input {
    display: none
}

.payment .checkbox-wrapper .icon {
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #cdcdcd;
    border-radius: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.payment .checkbox-wrapper input:checked + .icon {
    border: 2px solid #3ab034
}

.payment .checkbox-wrapper input:checked + .icon:after {
    content: ' ';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #3ab034;
    left: 50%;
    top: 50%;
    margin-top: -4px;
    margin-left: -4px
}

.payment .payBnt {
    font-size: .36rem;
    color: #333;
    font-weight: bold;
    width: 6.9rem;
    height: 1rem;
    background-color: #f9e067;
    border-radius: .1rem;
    text-align: center;
    line-height: 1rem;
    margin: .5rem auto
}

.loading-line {
    height: .86rem;
    line-height: .86rem;
    text-align: center;
    color: #999
}

.loading-line i {
    display: inline-block;
    width: .7rem;
    height: 1px;
    background-color: #333;
    vertical-align: middle
}

.loading-line span {
    margin: 0 .2rem
}

@keyframes myfirst {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.fa-spinner {
    animation: myfirst linear 1s infinite
}

.right-menu-wrapper {
    position: fixed;
    right: .22rem;
    top: 62%;
    width: .66rem;
    z-index: 45
}

.right-menu-wrapper a {
    display: inline-block;
    width: .64rem;
    height: .64rem;
    margin-top: .12rem;
    box-sizing: border-box;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background-image: url(../images/right-menu-icon.png);
    background-size: 1.24rem auto;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .9)
}

.right-menu-wrapper a.home {
    background-position: .06rem .06rem
}

.right-menu-wrapper a.buy-car {
    background-position: -.66rem .08rem
}

.receive-details {
    padding: 0 .3rem
}

.receive-details .white {
    background-color: #fff;
    border-radius: .1rem;
    margin-top: .38rem
}

.receive-details .white .header {
    background-image: url("../images/receive-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 6.9rem;
    height: 2.55rem;
    font-size: .32rem;
    font-weight: bold;
    border-radius: .1rem .1rem 0 0
}

.receive-details .white .header .name {
    position: relative
}

.receive-details .white .header .name img {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    position: absolute;
    left: -0.57rem
}

.receive-details .white .padding {
    padding: 0 .27rem .35rem .27rem
}

.receive-details .white .padding .receive {
    font-size: .28rem;
    color: #999;
    border-bottom: 1px solid #e6e6e6;
    margin-top: .32rem
}

.receive-details .white .padding .pic-text {
    margin: .32rem 0
}

.receive-details .white .padding .pic-text .pictrue {
    width: .97rem;
    height: .97rem
}

.receive-details .white .padding .pic-text .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.receive-details .white .padding .pic-text .text {
    width: 5rem;
    font-size: .32rem;
    color: #a0a0a0;
    padding-right: .16rem
}

.receive-details .white .padding .pic-text .text .name {
    color: #333;
    font-weight: bold
}

.receive-details .white .padding .pictrue3 {
    width: 6.36rem;
    height: 2.72rem
}

.receive-details .white .padding .pictrue3 img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.receive-details .pictrue4 {
    width: 6.9rem;
    height: 2.89rem;
    margin: .3rem 0
}

.receive-details .pictrue4 img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.payment-tip {
    width: 5.91rem;
    height: 2.85rem;
    margin: .1rem 0 0 1.14rem
}

.payment-tip img {
    width: 100%;
    height: 100%
}

.payState .pictrue {
    width: 1.94rem;
    height: 1.94rem;
    margin: .5rem auto 0 auto
}

.payState .pictrue img {
    width: 100%;
    height: 100%
}

.payState .status {
    font-size: .36rem;
    color: #333;
    text-align: center;
    font-weight: bold;
    margin-top: .25rem
}

.payState .learn {
    font-size: .3rem;
    color: #fff;
    margin: .75rem auto 0 auto;
    width: 3.17rem;
    height: .88rem;
    background-color: #509efb;
    text-align: center;
    line-height: .88rem;
    border-radius: .5rem
}

.shares-model {
    z-index: 100
}

.course-list .header {
    width: 100%;
    height: 3.5rem;
    position: relative;
    overflow: hidden
}

.course-list .header .swiper-slide {
    width: 100%;
    height: 100%
}

.course-list .header .swiper-slide img {
    width: 100%;
    height: 100%
}

.course-list .nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    height: 1rem;
    background-image: -webkit-linear-gradient(left, #2c65f7, #409dff);
    background-image: linear-gradient(to right, #2c65f7, #409dff);
    line-height: 1rem;
    font-size: .3rem;
    color: rgba(254, 254, 254, .8);
    
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden
}

.course-list .nav .item {
    display: inline-block;
    margin-left: .39rem
}

.course-list .nav .item.on {
    color: #fefefe;
    position: relative
}

.course-list .nav .item.on:after {
    position: absolute;
    content: '';
    width: .39rem;
    height: .04rem;
    background-color: #fff;
    border-radius: .02rem;
    left: 50%;
    margin-left: -0.195rem;
    bottom: .12rem
}

.course-list .nav .item:nth-last-of-type(1) {
    margin-right: .28rem
}

.course-list .line {
    width: 100%;
    height: .11rem;
    background-color: #f2f2f2;
    margin-bottom: .2rem
}

.promotion-poster .phraseWindow {
    width: 5.38rem;
    height: 5.07rem;
    background-color: #f7f7f7;
    border-radius: .2rem;
    color: #000;
    font-weight: bold;
    font-size: .34rem;
    position: fixed;
    top: 50%;
    margin-top: -2.535rem;
    left: 50%;
    margin-left: -2.69rem;
    z-index: 99
}

.promotion-poster .phraseWindow .name {
    text-align: center;
    height: .95rem;
    line-height: .95rem
}

.promotion-poster .phraseWindow .phraseCon {
    font-size: .26rem;
    padding: 0 .35rem;
    height: 3.2rem;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.7
}

.promotion-poster .phraseWindow .but {
    border-top: 1px solid #d8dadb
}

.promotion-poster .phraseWindow .but .item {
    width: 50%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    color: #157efb
}

.promotion-poster .phraseWindow .but .item.copy {
    border-left: 1px solid #d8dadb
}

.promotion-poster .phrase {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    position: fixed;
    right: .45rem;
    bottom: 1.5rem;
    display: block
}

.broadcast-details .header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.2rem;
    background-color: #333
}

.broadcast-details .header .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .3rem;
    line-height: 1.4;
    text-align: center;
    color: #fff
}

.broadcast-details .header .text img {
    width: .65rem;
    height: .54rem;
    display: block;
    margin: 0 auto .2rem
}

.broadcast-details .chat {
    position: absolute;
    top: 4.2rem;
    right: 0;
    bottom: 1rem;
    left: 0;
    padding-right: .23rem;
    padding-bottom: .37rem;
    padding-left: .3rem;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
}

.broadcast-details .chat .item {
    margin-top: .37rem
}

.broadcast-details .chat .item .pictrue {
    width: .8rem;
    height: .8rem;
    margin-top: .1rem
}

.broadcast-details .chat .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.broadcast-details .chat .item .text {
    margin-left: .2rem
}

.broadcast-details .chat .item .text.textR {
    text-align: right;
    margin: 0 .2rem 0 0
}

.broadcast-details .chat .item .text .name {
    font-size: .24rem;
    color: #999
}

.broadcast-details .chat .item .text .name .return {
    color: #509efb;
    margin-left: .17rem
}

.broadcast-details .chat .item .text.textR .name .return {
    margin: 0 .17rem 0 0
}

.broadcast-details .chat .item .text .conter {
    background-color: #fff;
    border-radius: .08rem;
    padding: .16rem .2rem;
    font-size: .3rem;
    color: #333;
    position: relative;
    max-width: 4.96rem;
    margin-top: .02rem;
    word-break: break-all
}

.broadcast-details .chat .item .text .spot {
    width: .15rem;
    height: .15rem;
    background-color: #c00000;
    border-radius: 50%;
    margin-left: .2rem
}

.broadcast-details .chat .item .text .conter:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-bottom: .09rem solid transparent;
    border-right: .14rem solid #fff;
    border-top: .09rem solid transparent;
    left: -0.14rem;
    top: .25rem
}

.broadcast-details .chat .item .text.textR .conter:before {
    left: unset;
    right: -0.14rem;
    transform: rotateY(180deg)
}

.broadcast-details .chat .item .text .conter img {
    width: 100%;
    display: block
}

.broadcast-details .chat .item .text .conter .img {
    width: .5rem
}

.broadcast-details .chat .item .text .conter .signal {
    width: .48rem;
    height: .48rem
}

.broadcast-details .chat .item .text .conter .signal.signalR {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg)
}

.broadcast-details .footerCon {
    position: fixed;
    bottom: 0;
    left: 0;
    min-height: 1rem;
    z-index: 55;
    width: 100%;
    transform: translate3d(0, 77.6%, 0);
    transition: all .3s cubic-bezier(.25, .5, .5, .9);
    background-color: #fff
}

.broadcast-details .footerCon.on {
    transform: translate3d(0, 0, 0)
}

.broadcast-details .footerCon .banner .swiper-slide {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    background-color: #fff;
    padding-bottom: .7rem;
    border-top: 1px solid #f5f5f5
}

.broadcast-details .footerCon .banner .swiper-slide .emoji-outer {
    display: block;
    width: .5rem;
    height: .5rem;
    margin: .4rem 0 0 .5rem
}

.broadcast-details .footerCon .banner .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: .1rem
}

.broadcast-details .footerCon .slider-banner .swiper-pagination-bullet-active {
    background-color: #999
}

.broadcast-details .recording {
    width: 3rem;
    height: 3rem;
    position: fixed;
    top: 40%;
    left: 50%;
    margin-left: -1.5rem
}

.broadcast-details .recording img {
    width: 100%;
    height: 100%
}

.broadcast-details .footer {
    width: 100%;
    background-color: #fff;
    padding: 0 .26rem;
    height: 1rem
}

.broadcast-details .footer img {
    width: .61rem;
    height: .6rem;
    display: block
}

.broadcast-details .footer .input {
    max-height: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden
}

.broadcast-details .footer .input, .broadcast-details .footer .voice {
    width: 4.18rem;
    height: .7rem;
    border-radius: .1rem;
    background-color: #e5e5e5;
    padding: 0 .3rem
}

.broadcast-details .fixed {
    position: fixed;
    right: .23rem;
    bottom: 1.2rem
}

.broadcast-details .fixed .item {
    width: .6rem;
    height: .6rem;
    text-align: center;
    line-height: .6rem;
    border: .02rem solid #509efb;
    background-color: #fff;
    border-radius: 50%;
    font-size: .24rem;
    color: #509efb;
    position: relative
}

.broadcast-details .fixed .item.on:before {
    position: absolute;
    width: 1px;
    height: .56rem;
    background-color: #509efb;
    content: '';
    transform: rotateZ(-20deg);
    left: 50%;
    margin-left: -0.5px
}

.broadcast-details .fixed .item ~ .item {
    margin-left: .15rem
}

.broadcast-details .barrage {
    position: fixed;
    bottom: 2.08rem;
    right: .24rem;
    transform: translate3d(150%, 0, 0);
    transition: all .3s cubic-bezier(.25, .5, .5, .9)
}

.broadcast-details .barrage.on {
    transform: translate3d(0, 0, 0)
}

.broadcast-details .barrage .item {
    opacity: .5
}

.broadcast-details .barrage .item ~ .item {
    margin-top: .2rem
}

.broadcast-details .barrage .item:nth-last-of-type(1) {
    opacity: 1
}

.broadcast-details .barrage .item .pictrue {
    width: .59rem;
    height: .59rem
}

.broadcast-details .barrage .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.broadcast-details .barrage .item .text {
    background-color: #666161;
    font-size: .24rem;
    color: #fff;
    border-radius: .08rem;
    max-width: 2.24rem;
    padding: .16rem .2rem;
    margin-right: .2rem
}

.broadcast-details .statistics {
    font-size: .24rem;
    color: #fff;
    position: fixed;
    right: 0;
    top: 4.6rem;
    background-color: rgba(48, 40, 40, 0.7);
    min-width: 1.7rem;
    height: .5rem;
    border-radius: .25rem 0 0 .25rem
}

.broadcast-details .statistics .spot {
    width: .12rem;
    height: .12rem;
    background-color: #54ff6b;
    border-radius: 50%;
    margin-right: .15rem
}

.broadcast-details .discuss {
    position: absolute;
    top: 4.2rem;
    right: 0;
    bottom: 1rem;
    left: 0;
    overflow-y: hidden;
    background-color: #e6e6e6;
    transform: translate3d(0, 100%, 0);
    transition: all .3s cubic-bezier(.25, .5, .5, .9)
}

.broadcast-details .discuss.on {
    transform: translate3d(0, 0, 0)
}

.broadcast-details .discuss .header {
    position: relative;
    height: .8rem;
    background-color: #fff;
    font-size: .3rem;
    line-height: .8rem;
    text-align: center;
    color: #333
}

.broadcast-details .discuss .up {
    position: absolute;
    left: .25rem;
    font-size: .3rem;
    color: #333
}

.broadcast-details .discuss .up .iconfont {
    font-size: .22rem;
    margin-right: .1rem
}

.broadcast-details .discuss .chat {
    position: absolute;
    top: .8rem;
    right: 0;
    bottom: 0;
    left: 0
}

.publicFollow {
    position: fixed;
    bottom: .3rem;
    width: 6.9rem;
    height: .8rem;
    border-radius: .1rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: .24rem;
    left: 50%;
    margin-left: -3.45rem;
    padding: 0 .2rem
}

.publicFollow .follow {
    width: 1rem;
    height: .4rem;
    background-color: #fff;
    text-align: center;
    font-size: .24rem;
    color: #509efb;
    border-radius: .07rem
}

.groupCode {
    width: 4.79rem;
    background-color: #fff;
    border-radius: .2rem;
    position: fixed;
    left: 50%;
    top: 20%;
    margin-left: -2.395rem;
    z-index: 99;
    padding-bottom: .24rem
}

.groupCode .code {
    width: 3.1rem;
    height: 3.1rem;
    margin: .7rem auto 0 auto
}

.groupCode .code img {
    width: 100%;
    height: 100%
}

.groupCode .codeTip {
    text-align: center;
    margin-top: .4rem;
    font-size: .37rem;
    color: #333
}

.groupCode .ewmCon {
    position: relative
}

.groupCode .ewmCon .iconfont {
    position: absolute;
    bottom: -1.5rem;
    color: #fff;
    font-size: .5rem;
    left: 50%;
    margin-left: -0.25rem
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .05rem
}

.indexNew .header {
    height: 1.29rem;
    padding-top: .3rem;
    padding-right: .2rem;
    padding-left: .2rem;
    background-color: #fff
}

.indexNew .header .search {
    height: .7rem;
    border-radius: .35rem;
    background-color: #f5f5f5;
    font-size: .26rem;
    color: #aaa
}

.indexNew .header .search .iconfont {
    margin-right: .16rem;
    font-size: .3rem;
    line-height: 1;
    color: #aaa
}

.indexNew .banner .swiper-slide {
    width: 6.66rem;
    height: 3.24rem;
    border-radius: .1rem
}

.indexNew .banner .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block
}

.indexNew .banner .swiper-pagination {
    position: static
}

.indexNew .banner .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    border-radius: .05rem;
    background-color: #b4b4b4;
    opacity: .54
}

.indexNew .banner .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: .2rem;
    background-color: #2c8eff;
    opacity: 1
}

.indexNew .nav .item {
    -webkit-box-flex: 0 0 20%;
    -webkit-flex: 0 0 20%;
    flex: 0 0 20%;
    min-width: 0;
    padding-top: .14rem;
    padding-bottom: .14rem;
    font-size: .22rem;
    line-height: .3rem;
    text-align: center
}

.indexNew .nav .item .pictrue {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto .14rem
}

.indexNew .nav .item .pictrue img {
    display: block;
    width: 100%;
    height: 100%
}

.indexNew .activity {
    padding: .24rem .2rem;
    margin-top: .14rem;
    background-color: #fff
}

.indexNew .activity .left {
    width: 2.75rem;
    height: 2.9rem;
    border-radius: .16rem;
    padding-top: .27rem;
    background-color: #f9fafc;
    text-align: center
}

.indexNew .activity .left .title, .indexNew .activity .right .item .text .title {
    
    font-size: .28rem;
    line-height: .4rem
}

.indexNew .activity .left .info, .indexNew .activity .right .item .text .info {
    margin-top: .05rem;
    
    font-size: .22rem;
    line-height: .3rem;
    color: #999
}

.indexNew .activity .left .pictrue {
    width: 1.5rem;
    height: 1.5rem;
    margin: .15rem auto 0
}

.indexNew .activity .left .pictrue img {
    display: block;
    width: 100%;
    height: 100%
}

.indexNew .activity .right .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.indexNew .activity .right .item {
    width: 4.19rem;
    height: 1.38rem;
    padding-right: .3rem;
    padding-left: .3rem;
    border-radius: .16rem;
    background-color: #f9fafc
}

.indexNew .activity .right .item ~ .item {
    margin-top: .16rem
}

.indexNew .activity .right .item .pictrue {
    width: 1rem;
    height: 1rem
}

.indexNew .activity .right .item .pictrue img {
    width: 100%;
    height: 100%
}

.public_title {
    height: 1.02rem;
    padding-right: .2rem;
    padding-left: .2rem
}

.public_title .name {
    
    font-size: .32rem;
    position: relative
}

.public_title .more {
    
    font-size: .22rem;
    color: #999
}

.public_title .more .knowledge {
    margin-left: .09rem;
    font-size: .18rem;
    line-height: 1em
}

.public_title .spot .item {
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    background-color: #c3c4c4;
    margin-left: .12rem
}

.public_title .spot .item.on {
    background-color: #2c8eff
}

.indexNew .broadcast {
    margin-top: .14rem;
    background-color: #fff
}

.indexNew .broadcast .swiperScroll {
    margin-left: .22rem
}

.indexNew .broadcast .swiperScroll .item {
    width: 3.2rem;
    margin-right: .21rem
}

.indexNew .broadcast .swiperScroll .item .pictrue {
    width: 100%;
    height: 1.8rem;
    border-radius: .1rem;
    position: relative
}

.indexNew .broadcast .swiperScroll .item .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: .1rem
}

.indexNew .broadcast .swiperScroll .item .pictrue .state {
    width: 1.2rem;
    height: .36rem;
    border-radius: .1rem 0 .1rem 0;
    background-image: linear-gradient(to right, #ff4a4a 0, #f00 100%);
    background-image: -webkit-linear-gradient(to right, #ff4a4a 0, #f00 100%);
    background-image: -moz-linear-gradient(to right, #ff4a4a 0, #f00 100%);
    top: 0;
    left: 0;
    position: absolute
}

.indexNew .broadcast .swiperScroll .item .pictrue .state.return {
    width: 1.02rem;
    background-image: linear-gradient(to right, #999 0, #666 100%);
    background-image: -webkit-linear-gradient(to right, #999 0, #666 100%);
    background-image: -moz-linear-gradient(to right, #999 0, #666 100%)
}

.indexNew .broadcast .swiperScroll .item .pictrue .state.make {
    width: 3.2rem;
    background-image: linear-gradient(to right, #85beff 0, #2c8eff 100%);
    background-image: -webkit-linear-gradient(to right, #85beff 0, #2c8eff 100%);
    background-image: -moz-linear-gradient(to right, #85beff 0, #2c8eff 100%)
}

.indexNew .broadcast .swiperScroll .item .pictrue .state img {
    width: .21rem;
    height: .21rem;
    display: block
}

.indexNew .broadcast .swiperScroll .item .pictrue .state .stateTxt {
    font-size: .22rem;
    color: #fff;
    
    margin-left: .07rem
}

.indexNew .broadcast .swiperScroll .item .text {
    padding-top: .18rem;
    padding-bottom: .33rem
}

.indexNew .broadcast .swiperScroll .item .text .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .4rem
}

.indexNew .broadcast .swiperScroll .item .text .info {
    margin-top: .12rem;
    font-size: .22rem;
    line-height: .4rem;
    color: #999;
    font-weight: 400
}

.indexNew .broadcast .swiperScroll .item .text .info .red {
    color: #ff4a4a
}

.indexNew .curriculum {
    margin-top: .14rem;
    background-color: #fff
}

.indexNew .curriculum .seeAll {
    font-size: .24rem;
    color: #2c8eff;
    font-weight: bold;
    width: 2.2rem;
    height: .5rem;
    border-radius: .25rem;
    background-color: #f5f5f5;
    margin: .32rem auto 0 auto
}

.indexNew .curriculum .seeAll img {
    width: .09rem;
    height: .17rem;
    display: block;
    margin-left: .1rem
}

.indexNew .curriculum .swiper-course .public_list .item .text .robbing {
    font-size: .24rem;
    color: #999;
    margin-top: .18rem
}

.indexNew .curriculum .swiper-course .public_list .item .text .robbing .num {
    color: #ff4a4a
}

.indexNew .curriculum .money {
    display: inline-block;
    vertical-align: middle
}

.indexNew .curriculum .money + .total {
    display: inline-block;
    margin-left: .1rem;
    vertical-align: middle;
    
    font-size: .22rem;
    color: #999
}

.indexNew .curriculum .swiper-pagination {
    position: static
}

.indexNew .curriculum .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    border-radius: .05rem;
    background: #b4b4b4;
    opacity: .54
}

.indexNew .curriculum .swiper-pagination-bullet-active {
    width: .2rem;
    background: #2c8eff;
    opacity: 1
}

.indexNew .liveone {
    width: 5rem;
    height: 4.5rem;
    margin: 0 auto;
    position: relative
}

.indexNew .btn {
    width: 2rem;
    height: .7rem;
    line-height: .7rem;
    text-align: center;
    background-color: #0d8ddb;
    color: #fff;
    border-radius: 5px;
    margin: 18px 70px
}

.indexNew .close {
    position: absolute;
    right: 1px;
    top: -40px
}

.indexNew .masks {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 55
}

.public_list {
    padding: 0 .2rem .21rem
}

.essential .list {
    padding-bottom: .24rem
}

.public_list .item ~ .item {
    margin-top: .24rem
}

.public_list .item .pictrue {
    width: 3.45rem;
    height: 1.92rem;
    border-radius: .1rem;
    position: relative
}

.public_list .item .pictrue img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: .1rem
}

.public_list .item .pictrue .label {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    padding-right: .11rem;
    padding-left: .11rem;
    border-radius: .03rem;
    
    font-size: .22rem;
    line-height: .34rem;
    background-color: rgba(0, 0, 0, .5);
    color: #fff
}

.public_list .item .text .num {
    
    font-size: .22rem;
    color: #999
}

.public_list .item .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem
}

.public_list .item .text > div:last-child {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.public_list .item .text > div:last-child > div:first-child {
    font-size: 0
}

.public_list .item .text .title {
    font-size: .28rem;
    line-height: .4rem;
    color: #333
}

.public_list .item .text .title .line1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal
}

.public_list .item .text .title .label, .indexNew .essential .list .item .text .title .label, .indexNew .english .list .item .text .title .label {
    font-size: .2rem;
    color: #fffefe;
    border-radius: .1rem 0 .1rem 0;
    height: .28rem;
    padding: 0 .1rem;
    margin-right: .1rem;
    background-image: linear-gradient(to right, #333 0, #666 100%);
    background-image: -webkit-linear-gradient(to right, #333 0, #666 100%)
}

.public_list .item .text .labelList {
    position: absolute;
    bottom: .57rem;
    left: 0
}

.public_list .item .text .labelList .labelItem, .indexNew .english .list .item .text .label .cell {
    display: inline-block;
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff;
    vertical-align: middle
}

.public_list .item .text .labelList .labelItem ~ .labelItem, .indexNew .english .list .item .text .info .label .cell ~ .cell {
    margin-left: .14rem
}

.indexNew .english .list .item .text .label .cell ~ .cell {
    margin-left: .14rem
}

.public_list .item .text .money {
    
    font-size: .24rem;
    color: #ff4a4a
}

.public_list .item .text .money span {
    font-size: .32rem
}

.public_list .item .text .row-between {
    margin-top: .15rem
}

.public_list .item .text .money .yen {
    font-size: .24rem
}

.indexNew .essential {
    margin-top: .14rem;
    background-color: #fff
}

.indexNew .essential .list .item ~ .item {
    margin-top: .24rem
}

.indexNew .essential .list .item .pictrue {
    position: relative;
    width: 7.1rem;
    height: 3.8rem;
    border-radius: .1rem;
    margin-right: auto;
    margin-left: auto;
    overflow: hidden
}

.indexNew .essential .list .item .pictrue img {
    width: 100%;
    height: 100%
}

.indexNew .essential .list .item .pictrue .label {
    position: absolute;
    right: .16rem;
    bottom: .16rem;
    padding-right: .14rem;
    padding-left: .14rem;
    border-radius: .03rem;
    
    font-size: .24rem;
    line-height: .38rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff
}

.indexNew .essential .list .item .text {
    padding: .14rem .2rem
}

.indexNew .essential .list .item .text .title .name {
    
    font-size: .28rem;
    line-height: .4rem
}

.indexNew .essential .list .item .text .info {
    margin-top: .12rem
}

.indexNew .essential .list .item .text .info > div:last-child {
    font-size: 0
}

.indexNew .essential.activity-offline .list .item .text .info > div:last-child {
    font-size: .22rem
}

.indexNew .essential.activity-offline .list .item .text .info {
    margin-top: .12rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .essential.activity-offline .list .item .text .info > div ~ div {
    margin-top: .1rem
}

.indexNew .essential.activity-offline .list .item .text .info .knowledge {
    margin-right: .1rem;
    font-size: .22rem;
    line-height: 1em
}

.indexNew .essential .list .item .text .info .labelList .labelItem {
    display: inline-block;
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff;
    vertical-align: middle
}

.indexNew .essential .list .item .text .info .labelList .labelItem ~ .labelItem {
    margin-left: .14rem
}

.indexNew .essential .list .item .text .info .free {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0
}

.indexNew .essential .list .item .text .info .free + .total {
    display: inline-block;
    vertical-align: middle;
    margin-left: .1rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .essential .list .item .text .info .money {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .32rem;
    color: #ff4a4a
}

.indexNew .interest .public_list .item .text .money {
    display: inline-block;
    vertical-align: middle
}

.indexNew .interest .public_list .item .text .free {
    display: inline-block;
    vertical-align: middle
}

.indexNew .interest .public_list .item .text .money + .total {
    display: inline-block;
    vertical-align: middle;
    margin-left: .1rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .interest .public_list .item .text .free + .total {
    display: inline-block;
    vertical-align: middle;
    margin-left: .1rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .interest .list .item .text .info .money + .total {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .22rem;
    color: #999
}

.indexNew .interest .list .item .text .info .free + .total {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .22rem;
    color: #999
}

.indexNew .essential .list .item .text .info .money .yen {
    font-size: .24rem
}

.indexNew .essential .list .item .text .info .money .tip {
    position: relative;
    display: inline-block;
    padding-right: .06rem;
    padding-left: .06rem;
    border-radius: .03rem;
    margin-left: .05rem;
    
    font-size: .16rem;
    line-height: .24rem;
    background-color: #ff4a4a;
    vertical-align: middle;
    color: #fff
}

.indexNew .essential .list .item .text .info .money .tip::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    border: .05rem solid;
    border-color: transparent #f50 transparent transparent;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.indexNew .essential .list .item .text .info .money + .total {
    display: inline-block;
    vertical-align: middle;
    margin-left: .1rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .interest {
    margin-top: .14rem;
    background-color: #fff
}

.indexNew .english .list {
    padding: 0 .2rem
}

.indexNew .english .list .item {
    width: 3.45rem;
    margin-bottom: .29rem
}

.indexNew .english .list .item .pictrue {
    position: relative;
    height: 1.92rem;
    border-radius: .1rem;
    overflow: hidden
}

.indexNew .english .list .item .pictrue img {
    display: block;
    width: 100%;
    height: 100%
}

.indexNew .english .list .item .text {
    position: relative;
    height: 1.61rem;
    padding-top: .14rem
}

.indexNew .english .list .item .text .title .name {
    
    font-size: .28rem;
    line-height: .4rem;
    color: #333;
    width: 100%
}

.indexNew .english .list .item .text .label {
    margin-top: .12rem
}

.indexNew .english .list .item .text .group {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.indexNew .english .list .item .text .group .money {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .24rem;
    color: #ff4a4a
}

.indexNew .english .list .item .text .group .money .num {
    font-size: .32rem;
    line-height: .45rem
}

.indexNew .english .list .item .text .group .free {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .24rem;
    line-height: .45rem
}

.indexNew .english .list .item .text .group .total {
    margin-left: .1rem;
    
    font-size: .22rem;
    color: #999
}

.indexNew .english .list .item .text .info .money .tip {
    position: relative;
    display: inline-block;
    padding-right: .06rem;
    padding-left: .06rem;
    border-radius: .03rem;
    background-color: #ff4a4a;
    margin-left: .05rem;
    
    font-size: .16rem;
    line-height: .24rem;
    color: #fff;
    vertical-align: middle
}

.indexNew .english .list .item .text .info .money .tip::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    border: .05rem solid;
    border-color: transparent #f50 transparent transparent;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.userNew .header {
    padding: 0 .6rem 0 .3rem;
    background-color: #2c8eff;
    height: 1.82rem;
    position: relative
}

.userNew .header:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.4rem;
    z-index: -1;
    content: '';
    height: 2rem;
    width: 100%;
    border-radius: 0 0 50% 50%;
    background-color: #2c8eff
}

.userNew .header .picTxt {
    font-size: .36rem;
    color: #fff
}

.userNew .header .picTxt .pictrue {
    width: 1.14rem;
    height: 1.14rem;
    border: .02rem solid #fff;
    border-radius: 50%;
    margin-right: .22rem
}

.userNew .header .picTxt .pictrue img {
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.userNew .header .icon-icon-yxj-arrow-right {
    color: #fff;
    font-size: .25rem
}

.userNew .header .picTxt .name {
    width: 4rem
}

.userNew .nav {
    justify-content: space-around;
    -webkit-justify-content: space-around;
    background-color: #fff;
    width: 6.9rem;
    height: 2rem;
    border-radius: .16rem;
    margin: 0 auto;
    position: relative
}

.userNew .nav .item {
    -webkit-flex: 1;
    flex: 1;
    text-align: center
}

.userNew .nav .item .pictrue {
    width: .7rem;
    height: .7rem;
    margin: 0 auto
}

.userNew .nav .item .pictrue img {
    width: 100%;
    height: 100%
}

.userNew .nav .item .name {
    font-size: .26rem;
    color: #333;
    margin-top: .14rem
}

.userNew .nav .item .info {
    font-size: .2rem;
    color: #999;
    margin-top: .04rem
}

.userNew .list {
    width: 6.9rem;
    background-color: #fff;
    margin: .18rem auto 0 auto;
    border-radius: .16rem
}

.userNew .list .item {
    padding: 0 .3rem;
    height: 1rem
}

.userNew .list .item .pictrue {
    width: .42rem;
    height: .42rem
}

.userNew .list .item .pictrue img {
    width: 100%;
    height: 100%
}

.userNew .list .item .name {
    font-size: .28rem;
    color: #666;
    margin-left: .3rem
}

.userNew .list .item .iconfont {
    color: #ccc;
    font-size: .25rem
}

.goodsClass .header {
    height: 1.78rem;
    background-image: linear-gradient(90deg, rgba(44, 101, 247, 1) 0, rgba(64, 157, 255, 1) 100%)
}

.goodsClass .header .search {
    padding: .16rem .48rem 0 .3rem
}

.goodsClass .header .search .pictrue {
    width: .72rem;
    height: .72rem
}

.goodsClass .header .search .pictrue img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .15rem;
}

.goodsClass .header .search .input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .64rem;
    padding-left: .27rem;
    border-radius: .32rem;
    margin-left: .26rem;
    background-color: #fff
}

.goodsClass .header .search .input img {
    width: .29rem;
    height: .3rem;
    display: block;
    margin-right: .16rem
}

.goodsClass .header .search .input input {
    font-size: .26rem;
    font-family: inherit
}

.goodsClass .header .search .input input::placeholder {
    color: #aaa
}

.goodsClass .header .wrapper {
    overflow: hidden
}

.goodsClass .header .wrapper .scroller ul::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.goodsClass .header .wrapper .scroller li {
    float: left;
    height: .9rem;
    padding-right: .39rem;
    padding-left: .39rem;
    line-height: .9rem;
    text-align: center;
    cursor: pointer
}

.goodsClass .header .wrapper .scroller li a {
    color: rgba(254, 254, 254, 0.8);
    font-size: .3rem;
    position: relative
}

.goodsClass .header .wrapper .scroller li.cur a {
    color: rgba(254, 254, 254, 1)
}

.goodsClass .header .wrapper .scroller li.cur a:before {
    color: #fefefe;
    width: .39rem;
    height: .04rem;
    background-color: #fff;
    position: absolute;
    content: '';
    bottom: -0.1rem;
    left: 50%;
    margin-left: -0.195rem
}

.goodsClass .nav {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    height: 1.76rem
}

.goodsClass .nav .scroller {
    position: absolute
}

.goodsClass .nav ul::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.goodsClass .nav .item {
    text-align: center;
    float: left;
    text-align: center
}

.goodsClass .nav .item a {
    display: block;
    padding: .22rem .2rem 0
}

.goodsClass .nav .item.on .pictrue {
    border: .02rem solid #2c8eff
}

.goodsClass .nav .item .pictrue {
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    margin: 0 auto .21rem;
    border: .02rem solid #2c8eff;
    overflow: hidden
}

.goodsClass .nav .item .pictrue img {
    width: 100%;
    height: 100%;
    display: block
}

.goodsClass .nav .item .name {
    font-size: .24rem;
    line-height: .33rem;
    color: #333
}

.goodsClass .nav .item.on .name {
    color: #2c8eff
}

.goodsClass .goodList {
    padding: .26rem 0
}

.goodsClass .goodList .item {
    padding: 0 .2rem
}

.goodsClass .goodList .item ~ .item {
    margin-top: .26rem
}

.goodsClass .goodList .pictrue {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden
}

.goodsClass .goodList .text .title .line1 {
    display: block;
    white-space: nowrap
}

.goodsClass .goodList .text .labelList {
    position: static;
    margin-top: .1rem;
    font-size: 0
}

.goodsClass .goodList .text .row-between {
    margin-top: 0
}

.goodsClass .goodList .text .money {
    display: inline-block;
    vertical-align: middle
}

.goodsClass .goodList .text .free {
    display: inline-block;
    margin-top: 0;
    vertical-align: middle
}

.goodsClass .goodList .text .money + .total {
    display: inline-block;
    margin-left: .1rem;
    vertical-align: middle;
    
    font-size: .22rem;
    color: #999
}

.goodsClass .goodList .text .free + .total {
    display: inline-block;
    margin-left: .1rem;
    vertical-align: middle;
    
    font-size: .22rem;
    color: #999
}

.cash-withdrawal .nav {
    height: 1.3rem;
    box-shadow: 0 .1rem .1rem #f8f8f8;
    -webkit-box-shadow: 0 .1rem .1rem #f8f8f8;
    -moz-box-shadow: 0 .1rem .1rem #f8f8f8;
    -o-box-shadow: 0 .1rem .1rem #f8f8f8
}

.cash-withdrawal .nav .item {
    font-size: .26rem;
    flex: 1;
    -webkit-flex: 1;
    -o-flex: 1;
    -ms-flex: 1;
    text-align: center
}

.cash-withdrawal .nav .item ~ .item {
    border-left: 1px solid #f0f0f0
}

.cash-withdrawal .nav .item .iconfont {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    border: .02rem solid #2c8eff;
    text-align: center;
    line-height: .37rem;
    margin: 0 auto .06rem auto;
    font-size: .22rem
}

.cash-withdrawal .nav .item .iconfont.on {
    background-color: #2c8eff;
    color: #fff;
    border-color: #2c8eff
}

.cash-withdrawal .nav .item .line {
    width: .02rem;
    height: .2rem;
    margin: 0 auto;
    transition: height .3s;
    -webkit-transition: height .3s;
    -moz-transition: height .3s;
    -o-transition: height .3s
}

.cash-withdrawal .nav .item .line.on {
    height: .39rem
}

.cash-withdrawal .wrapper .list {
    padding: 0 .3rem
}

.cash-withdrawal .wrapper .list .item {
    border-bottom: 1px solid #eee;
    height: 1.07rem;
    font-size: .3rem;
    color: #333
}

.cash-withdrawal .wrapper .list .item .name {
    width: 1.3rem
}

.cash-withdrawal .wrapper .list .item .input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.cash-withdrawal .wrapper .list .item .input input {
    width: 100%
}

.cash-withdrawal .wrapper .list .item .input select {
    width: 100%
}

.cash-withdrawal .wrapper .list .item .input input::placeholder {
    color: #bbb
}

.cash-withdrawal .wrapper .list .tip {
    font-size: .26rem;
    color: #999;
    margin-top: .25rem
}

.cash-withdrawal .wrapper .list .bnt {
    font-size: .32rem;
    color: #fff;
    width: 6.9rem;
    height: .9rem;
    text-align: center;
    border-radius: .5rem;
    line-height: .9rem;
    margin: .64rem auto
}

.cash-withdrawal .wrapper .list .tip2 {
    font-size: .26rem;
    color: #999;
    text-align: center;
    margin: .44rem 0 .2rem 0
}

.cash-withdrawal .wrapper .list .value {
    height: 1.35rem;
    line-height: 1.35rem;
    border-bottom: 1px solid #eee;
    width: 6.9rem;
    margin: 0 auto
}

.cash-withdrawal .wrapper .list .value input {
    font-size: .8rem;
    color: #282828;
    height: 1.35rem;
    text-align: center;
    width: 100%
}

.cash-withdrawal .wrapper .list .value input::placeholder {
    color: #bbb
}

.member-manage {
    position: relative;
    padding: .5rem .3rem
}

.member-manage::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 3.19rem;
    border-bottom-right-radius: .6rem;
    border-bottom-left-radius: .6rem;
    background-color: #282828
}

.member-manage.card-active::before {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.member-manage .wrapper {
    width: 6.9rem;
    border-radius: .16rem;
    margin-top: .2rem
}

.member-manage .wrapper:first-child {
    margin-top: 0
}

.member-manage .card {
    position: relative;
    height: 3.2rem;
    padding-top: .34rem;
    padding-right: .3rem;
    padding-left: .31rem;
    background-image: url("../images/card-bg.png");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.member-manage .card .user {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.member-manage .card .user img {
    width: .6rem;
    height: .6rem;
    border-radius: 50%
}

.member-manage .card .user .name {
    -webkit-flex: 1;
    flex: 1;
    overflow: hidden;
    margin-right: .2rem;
    margin-left: .2rem;
    font-size: .3rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #63440e
}

.member-manage .card .user .btn {
    width: 1.3rem;
    height: .4rem;
    border: 1px solid #63440e;
    border-radius: .2rem;
    font-size: .24rem;
    line-height: .4rem;
    text-align: center;
    color: #63440e
}

.member-manage .card .time {
    margin-top: .47rem;
    font-size: .24rem;
    line-height: .33rem;
    color: #63440e
}

.member-manage .card .time .iconfont {
    margin-right: .17rem;
    font-size: .26rem
}

.member-manage .card .label {
    position: absolute;
    right: .31rem;
    bottom: .32rem;
    font-size: .4rem;
    text-shadow: 0 1px 1px rgba(181, 156, 110, .5);
    color: #fff5e4
}

.member-manage .rights {
    background-color: #fff
}

.member-manage .rights .title {
    padding-top: .34rem;
    padding-bottom: .34rem;
    text-align: center
}

.member-manage .rights .title svg {
    font-size: .49rem;
    vertical-align: middle
}

.member-manage .rights .title > span {
    display: inline-block;
    font-size: .36rem;
    line-height: .5rem;
    vertical-align: middle;
    color: #333
}

.member-manage .rights ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.member-manage .rights li {
    -webkit-flex: 0 0 -webkit-calc(100% / 3);
    -webkit-flex: 0 0 calc(100% / 3);
    -webkit-flex: 0 0 -webkit-calc(100% / 3);
    flex: 0 0 calc(100% / 3);
    margin-bottom: .34rem;
    text-align: center
}

.member-manage .rights img {
    width: .96rem;
    height: .96rem;
    border-radius: 50%;
    vertical-align: middle
}

.member-manage .rights .name {
    margin-top: .3rem;
    font-size: .26rem;
    line-height: .37rem;
    color: #282828
}

.member-manage .rights .info {
    margin-top: .03rem;
    font-size: .21rem;
    line-height: .29rem;
    color: #999
}

.member-manage .explain {
    background-color: #fff
}

.member-manage .explain .title {
    padding-top: .34rem;
    padding-bottom: .34rem;
    text-align: center
}

.member-manage .explain .title svg {
    font-size: .45rem;
    vertical-align: middle
}

.member-manage .explain .title > span {
    display: inline-block;
    font-size: .36rem;
    line-height: .5rem;
    vertical-align: middle;
    color: #333
}

.member-manage .explain ol {
    padding-right: .2rem;
    padding-bottom: .37rem;
    padding-left: .3rem;
    margin-left: .3rem;
    font-size: .26rem;
    line-height: .46rem;
    color: #333;
    list-style-type: decimal
}

.member-manage .btn-wrapper {
    margin-top: .36rem
}

.member-manage .btn-wrapper button {
    width: 100%;
    border-radius: .45rem;
    font-size: .32rem;
    line-height: .9rem
}

.member-manage .btn-wrapper button ~ button {
    margin-top: .24rem
}

.member-manage .btn-wrapper .pay {
    color: #63440e;
    background-image: -webkit-linear-gradient(90deg, #f3e3c6 0, #daaf6b 100%);
    background-image: linear-gradient(90deg, #f3e3c6 0, #daaf6b 100%)
}

.member-manage .btn-wrapper .try {
    border: .02rem solid #999;
    color: #333
}

.member-manage .tip-wrapper {
    margin-top: .18rem;
    font-size: .24rem;
    line-height: .33rem;
    text-align: center;
    color: #271e0f
}

.member-manage .tip-wrapper button {
    color: #a97505
}

.member-manage .form .title {
    text-align: center
}

.member-manage .form .title svg {
    display: block;
    margin: 0 auto;
    font-size: .7rem
}

.member-manage .form .title .name {
    position: relative;
    display: inline-block;
    font-size: .36rem;
    line-height: .5rem;
    color: #e0c897
}

.member-manage .form .title .name::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: -.98rem;
    width: .72rem;
    height: .02rem;
    margin-top: -.01rem;
    background-color: #baa999
}

.member-manage .form .title .name::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: -.98rem;
    width: .72rem;
    height: .02rem;
    margin-top: -.01rem;
    background-color: #baa999
}

.member-manage .form .content {
    border-radius: .2rem;
    padding-top: .15rem;
    padding-right: .25rem;
    padding-left: .25rem;
    background-color: #fff;
    margin-top: .3rem
}

.member-manage .form .content label {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding-top: .3rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #eee
}

.member-manage .form .content .iconfont {
    font-size: .36rem;
    color: #282828
}

.member-manage .form .content input {
    -webkit-flex: 1;
    flex: 1;
    margin-left: .2rem;
    
    font-size: .3rem;
    line-height: .42rem
}

.member-manage .form .content input::-webkit-input-placeholder, .member-manage .form .content input::placeholder {
    color: #999
}

.member-manage .form .content button {
    width: 100%;
    height: .86rem;
    border-radius: .86rem;
    margin-top: .37rem;
    margin-bottom: .37rem;
    font-size: .32rem;
    background-image: -webkit-linear-gradient(90deg, #f3e3c6 0, #daaf6b 100%);
    background-image: linear-gradient(90deg, #f3e3c6 0, #daaf6b 100%);
    color: #63440e
}

.member-manage .popup-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #4c4c4c
}

.member-manage .popup-active {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 6.6rem;
    padding-top: 1.3rem;
    background-image: url("../images/active-popup-bg.png");
    background-position: left top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    -webkit-transition: transform .2s;
    transition: transform .2s
}

.member-manage .popup-active.active {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1)
}

.member-manage .popup-active .icon-guanbi {
    position: absolute;
    top: -.45rem;
    right: .3rem;
    font-size: .5rem;
    color: #fff
}

.member-manage .popup-active .popup-bd {
    padding: .32rem .31rem .32rem .29rem;
    border-radius: .2rem;
    margin-right: .6rem;
    margin-left: .6rem
}

.member-manage .popup-active .popup-bd input {
    width: 100%;
    padding: .17rem .29rem;
    border-radius: .1rem;
    background-color: #f5f5f5;
    font-size: .3rem;
    line-height: .42rem
}

.member-manage .popup-active .popup-bd input ~ input {
    margin-top: .24rem
}

.member-manage .popup-active .popup-bd input::-webkit-input-placeholder, .member-manage .popup-active .popup-bd input::placeholder {
    color: #ccc
}

.member-manage .popup-active .popup-ft {
    padding: 1.54rem .8rem .6rem;
    margin-top: -.82rem
}

.member-manage .popup-active .popup-ft button {
    width: 100%;
    border-radius: .43rem;
    background-color: #63440e;
    font-size: .32rem;
    line-height: .86rem;
    color: #f5e6bd
}

.member-recharge {
    position: relative;
    padding-top: .5rem
}

.member-recharge::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 3.19rem;
    background-color: #282828
}

.member-recharge .user {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding: .34rem .29rem .36rem .31rem;
    border-top-left-radius: .16rem;
    border-top-right-radius: .16rem;
    background-image: -webkit-linear-gradient(336deg, #e8d2a8 0, #c8a46a 100%);
    background-image: linear-gradient(336deg, #e8d2a8 0, #c8a46a 100%);
    margin-right: .3rem;
    margin-left: .3rem
}

.member-recharge .user img {
    width: .6rem;
    height: .6rem;
    border-radius: 50%
}

.member-recharge .user .name {
    -webkit-flex: 1;
    flex: 1;
    margin-right: .2rem;
    margin-left: .2rem;
    font-size: .3rem;
    color: #63440e
}

.member-recharge .user .time {
    font-size: .24rem;
    color: #63440e
}

.member-recharge .user .iconfont {
    margin-right: .17rem;
    font-size: .26rem;
    vertical-align: middle
}

.member-recharge .limit {
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    background-color: #fff
}

.member-recharge .limit .titles {
    padding: .34rem .3rem .32rem;
    font-size: .3rem;
    color: #999
}

.member-recharge .limit ul {
    padding-right: .3rem;
    padding-left: .3rem
}

.member-recharge .limit li {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center
}

.member-recharge .limit li ~ li {
    margin-top: .46rem
}

.member-recharge .limit .text {
    -webkit-flex: 1;
    flex: 1
}

.member-recharge .limit .text .price {
    font-size: .3rem;
    color: #333
}

.member-recharge .limit .text .number {
    font-size: .48rem;
    line-height: .67rem
}

.member-recharge .limit .text .number + span {
    padding: .02rem .13rem .02rem .16rem;
    border-radius: .03rem .12rem;
    margin-left: .12rem;
    background-image: -webkit-linear-gradient(90deg, #ff4a4a 0, #ff8989 100%);
    background-image: linear-gradient(90deg, #ff4a4a 0, #ff8989 100%);
    font-size: .22rem;
    vertical-align: super;
    color: #fff
}

.member-recharge .limit .text .info {
    font-size: .22rem;
    line-height: .3rem;
    color: #999
}

.member-recharge .limit .btn {
    width: 1.31rem;
    border-radius: .27rem;
    background-image: -webkit-linear-gradient(270deg, #f3e3c6 0, #daaf6b 100%);
    background-image: linear-gradient(270deg, #f3e3c6 0, #daaf6b 100%);
    font-size: .28rem;
    line-height: .54rem;
    color: #63440e
}

.member-recharge .limit .service {
    margin-top: .72rem;
    font-size: .24rem;
    line-height: .33rem;
    text-align: center;
    color: #999
}

.member-recharge .limit .service .iconfont {
    font-size: .32rem;
    vertical-align: middle
}

.audio-control {
    padding-top: .25rem;
    padding-bottom: .49rem;
    background-color: #fff
}

.audio-control .progress {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-right: .3rem;
    margin-left: .3rem;
    
    font-size: .28rem;
    line-height: .4rem;
    text-align: center;
    color: #2c8eff
}

.audio-control .progress .time {
    width: .75rem
}

.audio-control .progress .bar {
    -webkit-flex: 1;
    flex: 1;
    border-radius: .02rem;
    margin-right: .18rem;
    margin-left: .18rem;
    background-color: rgba(44, 142, 255, .3)
}

.audio-control .progress .bar .range {
    position: relative;
    height: .04rem;
    border-radius: .02rem;
    background-color: rgba(44, 142, 255, .8)
}

.audio-control .progress .bar .dot {
    position: absolute;
    top: 50%;
    left: 100%;
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    background-color: #2c8eff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.audio-control .btn-group {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .34rem
}

.audio-control .btn-group button {
    line-height: 1
}

.audio-control .btn-group .iconleft, .audio-control .btn-group .iconright {
    font-size: .36rem;
    color: #46505b
}

.audio-control .btn-group .icon {
    margin-right: .88rem;
    margin-left: .88rem;
    font-size: 1.1rem
}

.vip-price-icon {
    width: .46rem;
    height: .21rem;
    vertical-align: middle
}

.study-record header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .16rem .48rem .16rem .5rem;
    background-color: #2c65f7;
    background-image: linear-gradient(90deg, rgba(44, 101, 247, 1) 0, rgba(64, 157, 255, 1) 100%)
}

.study-record header .image {
    width: 1.26rem;
    max-height: 100%
}

.study-record header .img {
    display: block;
    width: 100%
}

.study-record header form {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .64rem;
    padding-right: .27rem;
    padding-left: .27rem;
    border-radius: .32rem;
    margin-left: .26rem;
    background-color: #fff
}

.study-record header form img {
    width: .29rem
}

.study-record header form input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: .16rem;
    font-size: .26rem;
    line-height: .35rem
}

.study-record header form input::-webkit-input-placeholder, .study-record header form input::placeholder {
    color: #aaa
}

.study-record .goods {
    padding-top: .26rem;
    padding-bottom: .26rem
}

.study-record .goods .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-right: .2rem;
    padding-left: .2rem
}

.study-record .goods .item ~ .item {
    margin-top: .26rem
}

.study-record .goods .image {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden
}

.study-record .goods img {
    display: block;
    width: 100%;
    height: 100%
}

.study-record .goods .image .label {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    width: .66rem;
    height: .34rem;
    border-radius: .03rem;
    background-color: rgba(0, 0, 0, .5);
    
    font-size: .22rem;
    line-height: .34rem;
    text-align: center;
    color: #fff
}

.study-record .goods .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .22rem
}

.study-record .goods .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .4rem;
    color: #333
}

.study-record .goods .text .label {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .1rem
}

.study-record .goods .text .label span {
    display: inline-block;
    height: .4rem;
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    vertical-align: middle;
    background-color: rgba(44, 142, 255, .06);
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff
}

.study-record .goods .text .label span ~ span {
    margin-left: .14rem
}

.study-record .goods .price {
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%
}

.study-record .goods .price .money {
    font-size: .24rem;
    color: #ff4a4a
}

.study-record .goods .price .money span {
    font-size: .32rem
}

.study-record .goods .price .free {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .24rem;
    color: #ffba25
}

.study-record .goods .price .group-price-icon {
    position: relative;
    width: .76rem;
    height: .24rem;
    border-radius: .03rem;
    margin-left: .14rem;
    background-color: #ff4a4a;
    
    font-size: .16rem;
    line-height: .24rem;
    text-align: center;
    color: #fff
}

.study-record .goods .price .group-price-icon::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    z-index: 2;
    border-width: .05rem;
    border-style: solid;
    border-color: transparent #ff4a4a transparent transparent;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.study-record .goods .price .total {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .22rem;
    text-align: right;
    color: #999
}

.study-record main .foot {
    margin-top: .2rem;
    font-size: .28rem;
    text-align: center
}

.study-record main .foot .tip {
    color: #999
}

.replay-directory .item {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.02rem;
    padding-right: .3rem;
    padding-left: .3rem
}

.replay-directory .item::before {
    content: " ";
    position: absolute;
    top: 0;
    right: .3rem;
    left: 1.1rem;
    z-index: 2;
    height: 1px;
    border-top: 1px solid #f5f5f5;
    color: #f5f5f5;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
}

.replay-directory .item:first-child::before {
    display: none
}

.replay-directory .item .label {
    width: .6rem;
    border: 1px solid rgba(102, 102, 102, .5);
    border-radius: .03rem;
    
    font-size: .22rem;
    line-height: .32rem;
    text-align: center;
    color: #333
}

.replay-directory .item .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: .2rem;
    margin-left: .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .3rem;
    color: #333
}

.replay-directory .item.active .label {
    border-color: rgba(44, 142, 255, .5);
    color: #2c8eff
}

.replay-directory .item.active .name {
    
    color: #2c8eff
}

.replay-directory .foot {
    font-size: .4rem;
    text-align: center
}

.replay-directory .foot .tip {
    font-size: .28rem;
    color: #999
}

.favorite {
    padding-top: .26rem;
    padding-bottom: .26rem
}

.favorite .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-right: .2rem;
    padding-left: .2rem
}

.favorite .item ~ .item {
    margin-top: .26rem
}

.favorite .item .image {
    position: relative
}

.favorite .item .image img {
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    vertical-align: middle
}

.favorite .item .image .label {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    z-index: 2;
    height: .34rem;
    border-radius: .03rem;
    background-color: rgba(0, 0, 0, .5);
    
    font-size: .22rem;
    line-height: .34rem;
    text-align: center;
    color: #fff
}

.favorite .item .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .24rem
}

.favorite .item .text .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .4rem;
    color: #333
}

.favorite .item .text .label {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .1rem
}

.favorite .item .text .label span {
    display: inline-block;
    height: .4rem;
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .06rem;
    background-color: rgba(44, 142, 255, .06);
    vertical-align: middle;
    
    font-size: .22rem;
    line-height: .4rem;
    color: #2c8eff
}

.favorite .item .text .label span ~ span {
    margin-left: .14rem
}

.favorite .item .text .price {
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%
}

.favorite .item .text .price .total {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .22rem;
    text-align: right;
    color: #999
}

.favorite .item .text .price .money {
    
    font-size: .24rem;
    color: #ff4a4a
}

.favorite .item .text .price .money span {
    font-size: .32rem
}

.favorite .item .text .price .free {
    
    font-size: .24rem;
    color: #ffba25
}

.favorite .item .text .price .group-price-icon {
    position: relative;
    width: .76rem;
    height: .24rem;
    border-radius: .03rem;
    margin-left: .14rem;
    background-color: #ff4a4a;
    
    font-size: .16rem;
    line-height: .24rem;
    text-align: center;
    color: #fff
}

.favorite .item .text .price .group-price-icon::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    z-index: 2;
    border-width: .05rem;
    border-style: solid;
    border-color: transparent #ff4a4a transparent transparent;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.gold-coin .header {
    height: 3.5rem;
    background: #2c8eff url("") center/cover no-repeat
}

.gold-coin .header .cont {
    position: relative;
    height: 2.63rem;
    line-height: 2.63rem;
    text-align: center
}

.gold-coin .header .text {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    overflow: hidden;
    
    font-size: .26rem;
    line-height: 1;
    color: #fff
}

.gold-coin .header .num {
    margin-top: .3rem;
    font-weight: bold;
    font-size: .78rem
}

.gold-coin .header .link {
    position: absolute;
    top: .74rem;
    right: 0;
    height: .54rem;
    padding-right: .32rem;
    padding-left: .47rem;
    border-top-left-radius: .27rem;
    border-bottom-left-radius: .27rem;
    background-color: #feb720;
    
    font-size: .3rem;
    line-height: .54rem;
    color: #fff
}

.gold-coin .main {
    min-height: .87rem;
    border-top-left-radius: .24rem;
    border-top-right-radius: .24rem;
    margin-top: -.87rem;
    background-color: #fff
}

.gold-coin .main .wrap {
    padding-right: .3rem;
    padding-left: .3rem
}

.gold-coin .main .wrap ~ .wrap {
    margin-top: .1rem
}

.gold-coin .wrap .head {
    height: 1.08rem;
    
    font-size: .3rem;
    line-height: 1.08rem;
    color: #282828
}

.gold-coin .select .list::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.gold-coin .select .list .item {
    float: left;
    display: block;
    margin-top: .21rem;
    margin-right: .21rem
}

.gold-coin .select .list .item:nth-child(-n+3) {
    margin-top: 0
}

.gold-coin .select .list .item:nth-child(3n+3) {
    margin-right: 0
}

.gold-coin .select .list input {
    display: none
}

.gold-coin .select .list .item-cont {
    width: 2.16rem;
    height: 1.2rem;
    border: 1px solid #eee;
    border-radius: .12rem;
    line-height: 1.2rem;
    text-align: center
}

.gold-coin .select .list input:checked + .item-cont {
    border-color: #539dfd
}

.gold-coin .select .list .text {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .28rem;
    line-height: 1;
    color: #999
}

.gold-coin .select .list .num {
    padding-right: .46rem;
    margin-bottom: .16rem;
    background: url("") right center/.36rem .36rem no-repeat;
    font-weight: bold;
    font-size: .36rem;
    color: #282828
}

.gold-coin .input {
    display: block;
    height: .86rem;
    border: 1px solid #eee;
    border-radius: .12rem;
    margin-top: .21rem;
    line-height: .86rem
}

.gold-coin .checked {
    border-color: #539dfd
}

.gold-coin .input::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.gold-coin .input .cell {
    float: left;
    width: 50%
}

.gold-coin .input .cell:first-child {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-right: .61rem;
    padding-left: .28rem;
    margin-right: -.16rem;
    background: url("") right center/.31rem no-repeat;
    
    font-size: .3rem;
    color: #999
}

.gold-coin .input input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    color: #282828
}

.gold-coin .input input.on {
    color: #999
}

.gold-coin .input input::-webkit-input-placeholder, .gold-coin .input input::placeholder {
    color: #999
}

.gold-coin .input .cell:last-child {
    padding-left: 1.02rem;
    background: url("") .46rem center/.36rem .36rem no-repeat
}

.gold-coin .method .item {
    display: block
}

.gold-coin .method .item ~ .item {
    margin-top: .19rem
}

.gold-coin .method input {
    display: none
}

.gold-coin .method .item-cont {
    border: 1px solid #eee;
    border-radius: .06rem;
    
    font-size: .28rem;
    color: #282828
}

.gold-coin .method input:checked + .item-cont {
    border-color: #539dfd;
    color: #539dfd
}

.gold-coin .method .item-cont::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.gold-coin .method .cell {
    float: left;
    width: 50%;
    height: .86rem;
    line-height: .86rem
}

.gold-coin .method .cell:first-child {
    padding-left: 1.5rem;
    background: url("") .86rem center/.44rem no-repeat
}

.gold-coin .method .item:last-child .cell:first-child {
    background-image: url("")
}

.gold-coin .method .cell:last-child {
    position: relative;
    font-size: .26rem;
    text-align: center;
    color: #aaa
}

.gold-coin .method .cell:last-child::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: .3rem;
    background-color: #eee;
    margin-top: -.15rem
}

.gold-coin .handle {
    padding-right: .41rem;
    padding-left: .41rem;
    margin-top: .74rem
}

.gold-coin .handle .btn {
    display: block;
    width: 100%;
    height: .86rem;
    border-radius: .43rem;
    background-color: #539dfd;
    
    font-size: .3rem;
    color: #fff
}

.sign-in .header {
    height: 3.6rem;
    background: #2c8eff url("") center/cover no-repeat
}

.sign-in .header .cont {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 2.97rem
}

.sign-in .header .image {
    width: 1.16rem;
    height: 1.16rem;
    border: .02rem solid #fff;
    border-radius: 50%;
    margin-right: .22rem;
    margin-left: .3rem;
    background-color: #fff;
    overflow: hidden
}

.sign-in .header .image .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sign-in .header .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.sign-in .header .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .32rem;
    line-height: 1em;
    color: #fff
}

.sign-in .header .info {
    display: inline-block;
    height: .36rem;
    padding-right: .18rem;
    padding-left: .18rem;
    border-radius: .18rem;
    margin-top: .26rem;
    background-color: #feb720;
    
    font-size: .26rem;
    line-height: .36rem;
    color: #fff
}

.sign-in .header .btn {
    position: absolute;
    top: .74rem;
    right: 0;
    height: .54rem;
    padding-right: .32rem;
    padding-left: .47rem;
    border-top-left-radius: .27rem;
    border-bottom-left-radius: .27rem;
    background-color: #feb720;
    
    font-size: .3rem;
    line-height: .54rem;
    color: #fff;
    cursor: pointer
}

.sign-in .main {
    padding-right: .3rem;
    padding-bottom: .3rem;
    padding-left: .3rem;
    margin-top: -.63rem
}

.sign-in .main .head {
    padding-bottom: .82rem;
    border-radius: .1rem;
    background-color: #fff
}

.sign-in .main .head .list {
    padding: .3rem .5rem
}

.sign-in .main .head .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 0;
    color: #999
}

.sign-in .main .head .item.on {
    color: #f90
}

.sign-in .main .head .day {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: .1rem;
    
    font-size: .32rem;
    color: #666
}

.sign-in .main .head .reward {
    width: .74rem;
    height: .32rem;
    border-radius: .16rem;
    margin-right: auto;
    margin-left: auto;
    background-color: rgba(244, 180, 9, .6);
    
    font-size: .2rem;
    line-height: .32rem;
    text-align: center;
    color: #a67d40
}

.sign-in .main .head .image {
    max-width: .75rem;
    height: .54rem;
    margin-right: auto;
    margin-left: .7rem;
    overflow: hidden
}

.sign-in .main .head .star {
    display: block;
    height: 100%
}

.sign-in .main .head .num {
    
    font-size: .32rem
}

.sign-in .main .head .btn {
    display: block;
    width: 4.5rem;
    height: .76rem;
    border-radius: .38rem;
    margin-right: auto;
    margin-left: auto;
    margin-top: .5rem;
    background-image: -webkit-linear-gradient(right, #409dff, #1e85fb);
    background-image: linear-gradient(to right, #409dff, #1e85fb);
    
    font-size: .28rem;
    color: #fff
}

.sign-in .main .foot {
    position: relative;
    padding-right: .4rem;
    padding-left: .4rem;
    border-radius: .1rem;
    margin-top: .14rem;
    background-color: #fff
}

.sign-in .main .foot .lock {
    position: absolute;
    top: -.41rem;
    left: 50%;
    width: 5.58rem;
    margin-left: -2.79rem
}

.sign-in .main .panel {
    padding-top: .69rem;
    padding-bottom: .41rem
}

.sign-in .main .panel .name {
    
    font-size: .32rem;
    line-height: .42rem;
    text-align: center;
    color: #666
}

.sign-in .main .panel .count {
    margin-top: .42rem;
    text-align: center
}

.sign-in .main .panel .cont {
    position: relative;
    display: inline-block
}

.sign-in .main .panel .cont::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.sign-in .main .panel .item {
    position: relative;
    float: left;
    width: .8rem;
    height: 1.16rem;
    border-radius: .1rem;
    background-image: -webkit-linear-gradient(top, #409dff, #1e85fb, #409dff);
    background-image: linear-gradient(#409dff, #1e85fb, #409dff);
    
    font-size: .72rem;
    line-height: 1.16rem;
    text-align: center;
    color: #fff
}

.sign-in .main .panel .item::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: .04rem;
    margin-top: -.02rem;
    background-color: #eee;
    opacity: .2
}

.sign-in .main .panel .item ~ .item {
    margin-left: .19rem
}

.sign-in .main .panel .unit {
    position: absolute;
    bottom: 0;
    left: 100%;
    margin-left: .15rem;
    
    font-size: .3rem;
    line-height: 1;
    color: #232323
}

.sign-in .main .panel .info {
    padding-right: .16rem;
    padding-left: .16rem;
    margin-top: .44rem;
    
    font-size: .3rem;
    line-height: .43rem;
    text-align: center;
    color: #999
}

.sign-in .main .record {
    border-top: 1px dashed rgba(195, 170, 140, .5)
}

.sign-in .main .record .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.3rem
}

.sign-in .main .record .item ~ .item {
    border-top: 1px solid #fbf4ec
}

.sign-in .main .record .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.sign-in .main .record .name {
    
    font-size: .3rem;
    line-height: .42rem;
    color: #232323
}

.sign-in .main .record .time {
    margin-top: .06rem;
    
    font-size: .24rem;
    line-height: .33rem;
    color: #bbb
}

.sign-in .main .record .num {
    font-size: .36rem;
    color: #e93323
}

.sign-in .poster {
    position: fixed;
    top: 15%;
    left: 15%;
    width: 70%;
    z-index: 60
}

.sign-in .poster img {
    width: 100%
}

.sign-in .poster p {
    color: #eee;
    font-size: 14px;
    margin-left: 25%
}

.sign-list .list {
    background-color: #fff
}

.sign-list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.3rem;
    padding-right: .43rem;
    padding-left: .4rem
}

.sign-list .item ~ .item {
    border-top: 1px solid #fbf4ec
}

.sign-list .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0
}

.sign-list .name {
    
    font-size: .3rem;
    line-height: .42rem;
    color: #232323
}

.sign-list .time {
    margin-top: .06rem;
    
    font-size: .24rem;
    line-height: .33rem;
    color: #bbb
}

.sign-list .num {
    font-size: .36rem;
    color: #e93323
}

.sign-list .tips {
    height: 1rem;
    font-size: .32rem;
    line-height: 1rem;
    text-align: center;
    color: #999
}

.bill .header {
    height: 2.2rem;
    padding-left: .6rem;
    background: #539dfd url("") 5.35rem center/1.2rem no-repeat;
    line-height: 2.2rem
}

.bill .header .cont {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .28rem;
    line-height: .4rem;
    color: #fff
}

.bill .header .cont .num {
    margin-top: .03rem;
    font-size: .5rem;
    line-height: .7rem
}

.bill .main .nav-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: #fff
}

.bill .main .nav-bar .item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .86rem;
    
    font-size: .28rem;
    line-height: .86rem;
    text-align: center;
    color: #282828
}

.bill .main .nav-bar .active {
    border-bottom: 1px solid #539dfd;
    color: #539dfd
}

.bill .main .nav-cont {
    border-top: 1px solid #f2f2f2
}

.bill .main .nav-cont .list {
    padding-left: .3rem;
    background-color: #fff
}

.bill .main .nav-cont .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 1.2rem;
    padding-right: .3rem
}

.bill .main .nav-cont .list .item ~ .item {
    border-top: 1px solid #f2f2f2
}

.bill .main .nav-cont .list .item .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.bill .main .nav-cont .list .item .name {
    
    font-size: .3rem;
    color: #282828
}

.bill .main .nav-cont .list .item .time {
    margin-top: .1rem;
    
    font-size: .28rem;
    color: #999
}

.bill .main .nav-cont .list .item .num {
    
    font-size: .32rem;
    color: #e93323
}

.bill .main .nav-cont .list .item .nums {
    
    font-size: .32rem;
    color: #539dfd
}

.bill .main .nav-cont .tips {
    height: 1rem;
    font-size: .32rem;
    line-height: 1rem;
    text-align: center;
    color: #999
}

.bills .header {
    height: 2.2rem;
    padding-left: .6rem;
    background: #539dfd url("") center/cover no-repeat;
    line-height: 2.2rem
}

.bills .header .cont {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .28rem;
    line-height: .4rem;
    color: #fff
}

.bills .header .cont .num {
    margin-top: .03rem;
    font-size: .5rem;
    line-height: .7rem
}

.bills .main .nav-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: #fff
}

.bills .main .nav-bar .item {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .86rem;
    
    font-size: .28rem;
    line-height: .86rem;
    text-align: center;
    color: #282828
}

.bills .main .nav-bar .active {
    border-bottom: 1px solid #539dfd;
    color: #539dfd
}

.bills .main .nav-cont {
    border-top: 1px solid #f2f2f2
}

.bills .main .nav-cont .list {
    padding-left: .3rem;
    background-color: #fff
}

.bills .main .nav-cont .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 1.2rem;
    padding-right: .3rem
}

.bills .main .nav-cont .list .item ~ .item {
    border-top: 1px solid #f2f2f2
}

.bills .main .nav-cont .list .item .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.bills .main .nav-cont .list .item .name {
    
    font-size: .3rem;
    color: #282828
}

.bills .main .nav-cont .list .item .time {
    margin-top: .1rem;
    
    font-size: .28rem;
    color: #999
}

.bills .main .nav-cont .list .item .num {
    
    font-size: .32rem;
    color: #e93323
}

.bills .main .nav-cont .list .item .nums {
    
    font-size: .32rem;
    color: #539dfd
}

.bills .main .nav-cont .tips {
    height: 1rem;
    font-size: .32rem;
    line-height: 1rem;
    text-align: center;
    color: #999
}

.activity .header {
    background-color: #fff
}

.activity .header .image {
    height: 4.2rem
}

.activity .header .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.activity .header .text {
    padding: .3rem
}

.activity .header .text .name {
    
    font-size: .36rem;
    color: #333
}

.activity .header .text .group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .27rem;
    
    font-size: .26rem;
    color: #999
}

.activity .header .text .money {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-weight: bold;
    font-size: .24rem;
    line-height: 1;
    color: #ff4a4a
}

.activity .header .text .money .num {
    font-size: .4rem
}

.activity .header .info {
    padding: .23rem .3rem;
    border-top: 1px solid #f1f1f1;
    
    font-size: .26rem;
    line-height: .52rem;
    color: #999
}

.activity .header .info .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.activity .header .info .knowledge {
    margin-right: .18rem;
    font-size: .22rem;
    color: #999
}

.activity .header .info .cont {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.activity .chat {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .7rem;
    padding-right: .3rem;
    padding-left: .3rem;
    border-radius: .12rem;
    margin: .12rem .2rem;
    background-color: #e2efff
}

.activity .chat .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    color: #2c8eff
}

.activity .chat .btn {
    width: 1.36rem;
    height: .46rem;
    border: 1px solid #3795ff;
    border-radius: .23rem;
    background-color: #2b8dff;
    
    font-size: .24rem;
    line-height: .42rem;
    text-align: center;
    color: #fff
}

.activity .main {
    margin-top: .14rem;
    background-color: #fff
}

.activity .nav-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-shadow: 0 .06rem .2rem 0 rgba(51, 51, 51, .03)
}

.activity .nav-bar .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .96rem;
    
    font-size: .3rem;
    line-height: .96rem;
    text-align: center;
    color: #333
}

.activity .nav-bar .item.on {
    font-weight: bold;
    color: #2c8eff
}

.activity .nav-bar .item.on::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.26rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.activity .nav-cont .section {
    padding: .3rem
}

.activity .nav-cont .section img {
    display: block;
    width: 100%
}

.activity .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-right: .3rem;
    border-top: 1px solid #eee;
    background-color: #fff
}

.activity .footer .link {
    width: .94rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center
}

.activity .footer .link .cont {
    display: inline-block;
    vertical-align: middle;
    font-size: .2rem;
    line-height: .36rem;
    color: #333
}

.activity .footer .link .img {
    display: block;
    width: .4rem;
    height: .4rem;
    margin-bottom: .1rem
}

.activity .footer .button {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .76rem;
    border-radius: .38rem;
    background-color: #2c8eff;
    font-family: inherit;
    
    font-size: .28rem;
    color: #fff
}

.activity .popup {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: .3s;
    transition: .3s
}

.activity .popup.on {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.activity .popup .head {
    position: relative;
    height: .98rem;
    
    font-size: .36rem;
    line-height: .98rem;
    text-align: center
}

.activity .popup .icon-guanbi1 {
    position: absolute;
    top: 50%;
    left: .3rem;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: inherit;
    
    font-size: .3rem;
    color: #999
}

.activity .popup .cont {
    border-top: 1px solid #e2e2e2
}

.activity .popup .label-group {
    padding: .24rem .75rem
}

.activity .popup .label {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: .56rem;
    padding-bottom: .38rem;
    border-bottom: 1px solid #eee
}

.activity .popup .label .name {
    width: 1.53rem;
    
    font-size: .3rem;
    color: #282828
}

.activity .popup .label .input {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-family: inherit;
    
    font-size: .28rem;
    color: #282828
}

.activity .popup .label .input::-webkit-input-placeholder, .activity .popup .label .input::placeholder {
    color: #ccc
}

.activity .popup .button-group {
    padding: .47rem .3rem .53rem
}

.activity .popup .button {
    display: block;
    width: 100%;
    height: 1rem;
    border-radius: .5rem;
    background-color: #2c8eff;
    font-family: inherit;
    font-weight: bold;
    font-size: .36rem;
    color: #fff
}

.live {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden
}

.live .header {
    position: relative;
    height: 4.22rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #333
}

.live .header .text {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    max-height: 100%;
    padding-top: .7rem;
    background: url("") center top/.65rem .54rem no-repeat;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    font-size: .3rem;
    line-height: 1.6;
    text-align: center;
    color: #fff
}

.live .nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.live .nav .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .86rem;
    
    font-size: .3rem;
    line-height: .86rem;
    text-align: center;
    color: #282828
}

.live .nav .active {
    color: #539dfd
}

.live .nav .active::after {
    content: " ";
    position: absolute;
    bottom: .1rem;
    left: 50%;
    width: .38rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #539dfd;
    margin-left: -.19rem
}

.live .main {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-height: 0;
    border-top: 1px solid #f1f1f1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.live .footer {
    min-height: .9rem;
    border-top: 1px solid #f0efef;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.live .main .section {
    height: 100%;
    background-color: #f5f5f5;
    -webkit-overflow-scrolling: touch;
    overflow: auto
}

.live .main .section.recom, .live .main .section.rank {
    background-color: #fff
}

.live .recom .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-right: .2rem;
    padding-left: .2rem;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.live .recom .list .image {
    position: relative;
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .12rem;
    overflow: hidden
}

.live .recom .list .tag {
    position: absolute;
    right: .1rem;
    bottom: .1rem;
    width: .66rem;
    height: .34rem;
    border-radius: .03rem;
    background-color: rgba(0, 0, 0, .5);
    
    font-size: .22rem;
    line-height: .34rem;
    text-align: center;
    color: #fff;
}

.live .recom .list .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.live .recom .list .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    padding-left: .2rem
}

.live .recom .list .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    line-height: 1;
}

.live .recom .list .label {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: .18rem
}

.live .recom .list .label .cell {
    height: .4rem;
    padding-right: .12rem;
    padding-left: .12rem;
    border-radius: .04rem;
    background-color: #eef5ff;
    
    font-size: .22rem;
    line-height: .4rem;
    color: #539dfd
}

.live .recom .list .label .cell ~ .cell {
    margin-left: .14rem
}

.live .recom .list .money {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin-top: .18rem
}

.live .recom .list .money .sell {
    
    font-size: .26rem;
    line-height: .32rem;
    color: #e93323
}

.live .recom .list .money .sell .num {
    font-size: .32rem
}

.live .recom .list .link {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1.12rem;
    height: .448rem;
    border-radius: .224rem;
    background-color: #e93323;
    
    font-size: .28rem;
    line-height: .448rem;
    text-align: center;
    color: #fff
}

.live .rank .list {
    padding-right: .2rem;
    padding-left: .2rem
}

.live .rank .list ~ .list {
    border-top: .12rem solid #f3f3f3
}

.live .rank .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.08rem
}

.live .rank .list .item ~ .item {
    border-top: 1px solid #f3f3f3
}

.live .rank .list .item .type {
    width: .72rem;
    
    font-size: .28rem;
    text-align: center;
    color: #666
}

.live .rank .list .item .type .img {
    width: .4rem;
    height: .4rem;
    vertical-align: middle
}

.live .rank .list .item .image {
    width: .68rem;
    height: .68rem;
    border-radius: 50%;
    margin-right: .3rem;
    margin-left: .2rem;
    overflow: hidden
}

.live .rank .list .item .image .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.live .rank .list .item .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    color: #333
}

.live .rank .list .item .num {
    padding-right: .46rem;
    background: right center/.31rem .31rem no-repeat;
    
    font-size: .28rem;
    color: #282828
}

.live .footer .control {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .15rem .2rem .15rem .3rem
}

.live .footer .control .button {
    width: .48rem;
    height: .48rem
}

.live .footer .control .button ~ .button {
    margin-left: .2rem
}

.live .footer .control .button .img {
    display: block;
    width: 100%;
    height: 100%
}

.live .footer .control .form {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-width: 0;
    padding-right: .18rem;
    padding-left: .18rem;
    border-radius: .08rem;
    margin-left: .3rem;
    background-color: #f2f2f2
}

.live .footer .control .form .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    height: .72rem;
    font-family: inherit;
    font-size: .28rem
}

.live .footer .control .form .submit {
    width: .5rem;
    height: .5rem;
    margin-left: .18rem;
    background: url("") center/cover no-repeat;
}

.live .swiper-container .swiper-slide {
    padding-bottom: .7rem;
    border-top: 1px solid #f5f5f5
}

.live .swiper-container .swiper-slide::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.live .swiper-container .button {
    float: left;
    display: block;
    width: .5rem;
    height: .5rem;
    margin-top: .4rem;
    margin-left: .5rem
}

.live .swiper-container .img {
    display: block;
    width: 100%;
    height: 100%
}

.live .swiper-container .swiper-pagination-bullet-active {
    background: #999
}

.live .load {
    padding-top: .1rem;
    padding-bottom: .1rem;
    font-size: .28rem;
    text-align: center;
    color: #999
}

.live .load .fa-spinner {
    font-size: .32rem
}

.live .chat .list {
    padding: .2rem .9rem .2rem .2rem
}

.live .chat .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.live .chat .item ~ .item {
    margin-top: .2rem
}

.live .chat .item .avatar {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden
}

.live .chat .item .avatar .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.live .chat .item .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .15rem
}

.live .chat .item .text-cont {
    display: inline-block;
    vertical-align: middle
}

.live .chat .item .text .name {
    
    font-size: .26rem;
    line-height: 1em;
    color: #999
}

.live .chat .item .text .info {
    margin-top: .15rem
}

.live .chat .item .text .info .cont {
    display: inline-block;
    padding: .09rem .2rem;
    border-radius: .06rem .16rem .16rem;
    background-color: #fff;
    word-break: break-all;
    
    font-size: .28rem;
    line-height: .38rem;
    color: #333
}

.live .chat .item .text .info .cont img {
    width: .36rem;
    height: .36rem;
    vertical-align: middle
}

.live .chat .send .text {
    margin-right: .15rem;
    margin-left: .7rem;
    text-align: right
}

.live .chat .send .text .info .cont {
    border-top-left-radius: .16rem;
    border-top-right-radius: .06rem;
    text-align: left;
    word-break: break-all
}

.live .side-menu {
    position: absolute;
    right: .2rem;
    bottom: .3rem
}

.live .side-menu .btn {
    display: block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    overflow: hidden
}

.live .side-menu .btn ~ .btn {
    margin-top: .2rem
}

.live .side-menu .btn .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.live .side-menu .barrage-btn img {
    display: block;
    width: 100%;
    height: 100%
}

.live .online {
    position: absolute;
    top: .2rem;
    right: 0;
    height: .46rem;
    padding-right: .2rem;
    padding-left: .43rem;
    border-top-left-radius: .23rem;
    border-bottom-left-radius: .23rem;
    background-color: #54d16c;
    
    font-size: .26rem;
    line-height: .46rem;
    color: #fff
}

.live .online::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: .2rem;
    width: .1rem;
    height: .1rem;
    border-radius: 50%;
    background-color: #ffdf58;
    margin-top: -.05rem
}

.live .welcome {
    position: absolute;
    top: .2rem;
    left: 0;
    z-index: 99;
    height: .46rem;
    padding-right: .25rem;
    padding-left: .2rem;
    border-top-right-radius: .23rem;
    border-bottom-right-radius: .23rem;
    background-color: #000;
    
    font-size: .26rem;
    line-height: .46rem;
    color: #fff;
    opacity: .3;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: .3s;
    transition: .3s
}

.live .welcome.on {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.live .welcome .name {
    color: #fee229
}

.live .gift-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: #fff
}

.live .gift .swiper-slide {
    padding-top: .15rem;
    padding-bottom: .59rem
}

.live .gift .swiper-slide::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.live .gift .swiper-slide .item {
    position: relative;
    float: left;
    width: 25%;
    padding: .1rem;
    text-align: center;
    cursor: pointer
}

.live .gift .swiper-slide .item.on {
    border-radius: .1rem;
    background-color: #f5f9ff;
    color: #539dfd
}

.live .gift .swiper-slide .item.on::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: .02rem solid #539dfd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.live .gift .item .image {
    width: 1rem;
    height: 1rem;
    margin-right: auto;
    margin-left: auto
}

.live .gift .item .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.live .gift .item .name {
    margin-top: .1rem;
    
    font-size: .24rem;
    line-height: 1;
    text-align: center;
    color: #282828
}

.live .gift .item .num {
    display: inline-block;
    margin-top: .1rem;
    padding-right: .23rem;
    background: url("") right center/.18rem .18rem no-repeat;
    
    font-size: .22rem;
    line-height: 1;
    color: #999
}

.live .gift .swiper-pagination {
    bottom: 0
}

.live .gift-wrapper .foot {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1rem;
    padding-right: .2rem;
    padding-left: .2rem;
    border-top: 1px solid #f1f1f1
}

.live .gift-wrapper .foot .text-group {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-size: .2rem;
    color: #539dfd
}

.live .gift-wrapper .foot .text-group .knowledge {
    font-size: .3rem
}

.live .gift-wrapper .foot .text-group .number {
    padding-left: .46rem;
    background: url("") left center/.36rem .36rem no-repeat;
    vertical-align: middle;
    color: #282828
}

.live .gift-wrapper .foot .text-group .iconfont2 {
    vertical-align: middle;
    font-size: .18rem;
    color: #666
}

.live .gift-wrapper .foot .button-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width: 3.2rem
}

.live .gift-wrapper .foot .button {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .6rem;
    border: 1px solid #539dfd;
    font-family: inherit;
    
    font-size: .28rem;
    color: #282828
}

.live .gift-wrapper .foot .select {
    border-right: 0;
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.live .gift-wrapper .foot .post {
    border-left: 0;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    background-color: #539dfd;
    color: #fff
}

.live .gift-wrapper .foot .button .iconfont2 {
    margin-left: .2rem;
    font-size: .18rem;
    color: #539dfd
}

.live .gift-wrapper .foot .button .list {
    position: absolute;
    bottom: 100%;
    left: 50%;
    z-index: 9;
    width: 1.93rem;
    margin-bottom: .13rem;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(166, 166, 166, .3);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    
    font-size: .3rem;
    line-height: .44rem;
    color: #539dfd
}

.live .gift-float {
    position: absolute;
    top: 1.75rem;
    left: 0;
    margin-bottom: .3rem;
    animation: move 1s
}

@keyframes move {
    0% {
        -webkit-transform: translateY(500%);
        transform: translateY(500%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes move {
    0% {
        -webkit-transform: translateY(500%);
        transform: translateY(500%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.live .gift-float .cont {
    display: inline-block;
    height: .72rem;
    padding-right: .3rem;
    padding-left: .2rem;
    border-top-right-radius: .36rem;
    border-bottom-right-radius: .36rem;
    background-image: linear-gradient(90deg, rgba(83, 157, 253, 1) 0, rgba(119, 228, 255, 1) 100%);
    font-size: 0;
    line-height: .72rem
}

.live .gift-float .avatar {
    display: inline-block;
    width: .56rem;
    height: .56rem;
    border-radius: 50%;
    background: center/cover no-repeat;
    overflow: hidden;
    vertical-align: middle
}

.live .gift-float .text {
    display: inline-block;
    width: 1.52rem;
    margin-right: .15rem;
    margin-left: .15rem;
    vertical-align: middle;
    
    font-size: .18rem;
    line-height: 1;
    color: #fff
}

.live .gift-float .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-bottom: .07rem;
    font-weight: bold;
    font-size: .26rem
}

.live .gift-float .image {
    display: inline-block;
    width: .72rem;
    height: .72rem;
    background: url("") center/contain no-repeat;
    vertical-align: middle
}

@keyframes giftnum {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes giftnum {
    0% {
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.live .gift-float .num {
    display: inline-block;
    vertical-align: bottom;
    text-shadow: 1px 1px 0 #8b5a00, -1px -1px 0 #8b5a00;
    font: italic bold .72rem/1 "FZCuYuan-M03S";
    color: #ffdf58;
    animation: giftnum 1s;
    -webkit-animation: giftnum 1s;
}

.live .barrage {
    position: absolute;
    right: .2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transform: translate3d(150%, 0, 0);
    transition: all .3s cubic-bezier(.25, .5, .5, .9)
}

.live .barrage.on {
    transform: translate3d(0, 0, 0)
}

.live .barrage .item {
    opacity: .5
}

.live .barrage .item ~ .item {
    margin-top: .2rem
}

.live .barrage .item:nth-last-of-type(1) {
    opacity: 1
}

.live .barrage .item .pictrue {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden
}

.live .barrage .item .pictrue img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.live .barrage .item .text {
    background-color: #fff;
    
    font-size: .28rem;
    line-height: .46rem;
    color: #282828;
    border-radius: .16rem .06rem .16rem .16rem;
    max-width: 2.24rem;
    padding: .05rem .2rem;
    margin-right: .16rem;
    word-wrap: break-word
}

.live .barrage .item .text img {
    width: .37rem;
    height: .37rem;
    vertical-align: middle
}

.activity_list .list {
    padding-top: .26rem;
    padding-bottom: .26rem
}

.activity_list .nav-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    background-color: #fff
}

.activity_list .nav-bar .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .96rem;
    
    font-size: .28rem;
    line-height: .96rem;
    text-align: center
}

.activity_list .list .activitys {
    margin-top: 10px;
    background-color: #fff;
    display: block
}

.activity_list .nav-bar .active {
    color: #2c8eff
}

.activity_list .nav-bar .active::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: .6rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.activity_list .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-right: .2rem;
    padding-left: .2rem
}

.activity_list .list .item ~ .item {
    margin-top: .26rem
}

.activity_list .list .items {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .13rem .2rem .0rem .2rem;
    color: #666;
    font-size: 14px
}

.activity_list .list .image {
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden
}

.activity_list .list .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.activity_list .list .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem
}

.activity_list .list .name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .4rem
}

.activity_list .list .names {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .3rem;
    line-height: 1;
    color: #333
}

.activity_list .list .time {
    margin-top: .1rem;
    
    font-size: .22rem;
    line-height: 1em;
    color: #999
}

.activity_list .list .time .knowledge {
    margin-right: .1rem;
    font-size: .22rem
}

.activity_list .list .group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .44rem;
    
    font-size: .22rem;
    line-height: 1em;
    color: #999
}

.activity_list .list .group .money {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .24rem;
    color: #ff4a4a
}

.activity_list .list .group .money .num {
    font-size: .32rem
}

.activity_list .tips {
    text-align: center;
    color: #999
}

.promotion .header {
    height: 3.6rem;
    background: #2c8eff url("") center/cover no-repeat
}

.promotion .header .cont {
    position: relative;
    height: 2.97rem;
    line-height: 2.97rem;
    text-align: center
}

.promotion .header .text {
    display: inline-block;
    vertical-align: middle;
    
    font-size: .28rem;
    line-height: 1;
    color: #fff
}

.promotion .header .money {
    margin-top: .3rem;
    margin-bottom: .45rem;
    font-weight: bold;
    font-size: .74rem
}

.promotion .header .link {
    color: #fff
}

.promotion .header .link .knowledge {
    margin-left: .1rem;
    font-size: .2rem
}

.promotion .header .btn {
    position: absolute;
    top: .74rem;
    right: 0;
    height: .54rem;
    padding-right: .32rem;
    padding-left: .47rem;
    border-top-left-radius: .27rem;
    border-bottom-left-radius: .27rem;
    background-color: #feb720;
    
    font-size: .3rem;
    line-height: .54rem;
    color: #fff
}

.promotion .sheet {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.4rem;
    border-radius: .1rem;
    margin: -.63rem .3rem .27rem;
    background-color: #fff;
    box-shadow: 1px .02rem .15rem 0 rgba(210, 210, 210, .14);
    
    font-size: .28rem;
    line-height: 1;
    text-align: center;
    color: #9a9a9a
}

.promotion .sheet .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.promotion .sheet .item ~ .item {
    border-left: 1px solid #ebebeb
}

.promotion .sheet .num {
    margin-top: .22rem;
    font-weight: bold;
    font-size: .42rem;
    color: #343434
}

.promotion .control .link {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .98rem;
    padding-right: .3rem;
    padding-left: .32rem;
    background-color: #fff;
    
    font-size: .3rem;
    color: #282828
}

.promotion .control .link ~ .link {
    border-top: 1px solid #f2f2f2
}

.promotion .control .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.promotion .control .knowledge {
    font-size: .24rem;
    color: #999
}

.activity-verify .list {
    padding-left: .3rem;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5
}

.activity-verify .list .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding-top: .3rem;
    padding-right: .3rem;
    padding-bottom: .3rem
}

.activity-verify .list .item ~ .item {
    border-top: 1px solid #f5f5f5
}

.activity-verify .list .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1
}

.activity-verify .list .image {
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden
}

.activity-verify .list .image .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.activity-verify .list .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-left: .2rem
}

.activity-verify .list .text .title {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: 1;
    color: #333
}

.activity-verify .list .text .time {
    margin-top: .2rem;
    
    font-size: .22rem;
    line-height: 1;
    color: #999
}

.activity-verify .list .text .time .iconfont2 {
    margin-right: .1rem;
    font-size: .22rem
}

.activity-verify .list .text .group {
    margin-top: .4rem
}

.activity-verify .list .text .money {
    font-weight: bold;
    font-size: .24rem;
    line-height: 1;
    color: #ff4a4a
}

.activity-verify .list .text .money .num {
    font-size: .32rem
}

.activity-verify .list .value {
    color: #999
}

.activity-verify .list .value.status {
    color: #2c8eff
}

.activity-verify .list .value.time {
    font-size: .28rem;
    color: #539dfd
}

.activity-verify .list .value.money {
    color: #ff4a4a
}

.activity-verify .qrcode {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.activity-verify .qrcode .image {
    width: 3.54rem;
    height: 3.54rem;
    margin-right: auto;
    margin-left: auto
}

.activity-verify .qrcode .image .img {
    display: block;
    width: 100%;
    height: 100%
}

.activity-verify .qrcode .text {
    margin-top: .1rem;
    font-size: .28rem;
    text-align: center;
    color: #333
}

.activity-verify .button-group {
    padding: 1rem .3rem
}

.activity-verify .button-group .button {
    display: block;
    width: 100%;
    height: .76rem;
    border-radius: .38rem;
    background-color: #2c8eff;
    
    font-size: .28rem;
    color: #fff
}

.gift-given .main .list .item {
    background-color: #fff
}

.gift-given .main .list .item ~ .item {
    margin-top: .2rem
}

.gift-given .main .list .head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .98rem;
    padding-right: .3rem;
    padding-left: .3rem
}

.gift-given .main .list .head .name {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .3rem;
    color: #282828
}

.gift-given .main .list .head .link {
    
    font-size: .26rem;
    color: #999
}

.gift-given .main .list .head .link.button {
    width: 1.16rem;
    height: .48rem;
    border-radius: .07rem;
    background-color: #feb720;
    line-height: .48rem;
    text-align: center;
    color: #fff
}

.gift-given .main .list .content {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: .3rem;
    border-top: 1px solid #f2f2f2
}

.gift-given .main .list .content .image {
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden
}

.gift-given .main .list .content .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.gift-given .main .list .content .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-left: .32rem
}

.gift-given .main .list .content .name {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    
    font-size: .28rem;
    line-height: .36rem;
    color: #333
}

.gift-given .main .list .content .money {
    position: absolute;
    bottom: .19rem;
    left: 0;
    font-weight: bold;
    font-size: .24rem;
    color: #ff4a4a
}

.gift-given .main .list .content .money .number {
    font-size: .32rem
}

.gift-given .main .tips {
    height: 1rem;
    font-size: .28rem;
    line-height: 1rem;
    text-align: center;
    color: #999
}

.gift-given .main .tips .fa {
    font-size: .32rem
}

/* 商品列表 */
.store-home {
    padding-bottom: 1.4rem;
}

.store-home .carousel {
    position: relative;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

.store-home .carousel .swiper-container {
    width: 7.1rem;
    height: 3.1rem;
    border-radius: .2rem;
}

.store-home .carousel .img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .2rem;
    object-fit: cover;
    pointer-events: none;
}

.store-home .carousel .swiper-pagination {
    bottom: .08rem;
    left: 0;
    width: 100%;
    font-size: 0;
}

.store-home .carousel .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    border-radius: .05rem;
    margin-right: .05rem;
    margin-left: .05rem;
    background: #d6d6d6;
    opacity: 1;
}

.store-home .carousel .swiper-pagination-bullet-active {
    width: .2rem;
    background: #2c8eff;
}

.store-home .navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff;
}

.store-home .navigation .swiper-slide {
    width: auto;
    height: .92rem;
    padding-right: .25rem;
    padding-left: .25rem;
    font-size: .3rem;
    line-height: .92rem;
    color: #666;
    cursor: pointer;
}

.store-home .navigation .swiper-slide.on {
    font-weight: bold;
    font-size: .3rem;
    color: #2d8eff;
}

.store-home .navigation .swiper-slide.on::after {
    content: " ";
    position: absolute;
    bottom: .1rem;
    left: 50%;
    z-index: 2;
    width: .42rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.store-home .nothing {
    display: block;
    width: 4.14rem;
    margin: .3rem auto;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.store-home .list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: .3rem;
    padding-right: .2rem;
    padding-left: .2rem;
}

.store-home .list .item {
    width: 3.45rem;
    margin-bottom: .3rem;
}

.store-home .list .image {
    height: 1.92rem;
    border-radius: .1rem;
    overflow: hidden;
}

.store-home .list .image .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.store-home .list .text {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 1.48rem;
    padding-top: .13rem;
}

.store-home .list .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .28rem;
    line-height: .4rem;
    color: #343434;
}

.store-home .list .group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.store-home .list .price {
    font-size: .24rem;
    color: #ff4a4a;
}

.store-home .list .price .num {
    font-size: .32rem;
}

.store-home .list .sale {
    font-size: .22rem;
    color: #aaa;
}

/* 商品详情 */
.goods-detail .swiper-container .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.goods-detail .swiper-container .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    border-radius: .05rem;
    margin-right: .05rem;
    margin-left: .05rem;
    background: #d6d6d6;
    opacity: 1;
}

.goods-detail .swiper-container .swiper-pagination-bullet-active {
    width: .2rem;
    background: #2c8eff;
}

.goods-detail .header .text {
    padding-top: .25rem;
    padding-right: .3rem;
    padding-left: .3rem;
    background-color: #fff;
}

.goods-detail .header .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .32rem;
    line-height: .5rem;
    color: #333;
}

.goods-detail .header .group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .7rem;
    margin-top: .05rem;
}

.goods-detail .header .price,
.goods-detail .header .vip-price {
    display: inline-block;
}

.goods-detail .header .price {
    font-size: .24rem;
    color: #ff4a4a;
}

.goods-detail .header .price {
    font-size: .24rem;
}

.goods-detail .header .price .num {
    font-weight: bold;
    font-size: .32rem;
}

.goods-detail .header .vip-price {
    font-size: .28rem;
    color: #282828;
}

.goods-detail .header .vip-price .img {
    width: .46rem;
    height: .21rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.goods-detail .header .sale {
    font-size: .24rem;
    color: #999;
}

.goods-detail .main {
    margin-top: .2rem;
    background-color: #fff;
}

.goods-detail .main .name {
    height: .96rem;
    box-shadow: 0 .06rem .2rem 0 rgba(51, 51, 51, .03);
    font-size: .3rem;
    line-height: .96rem;
    text-align: center;
    color: #333;
}

.goods-detail .main .cont {
    padding: .3rem;
}

.goods-detail .main .cont img {
    display: block;
    width: 100%;
    pointer-events: none;
}

.goods-detail .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-right: .3rem;
    background-color: #fff;
}

.goods-detail .footer .group {
    display: -webkit-flex;
    display: flex;
    height: 1rem;
    padding-right: .15rem;
    padding-left: .15rem;
}

.goods-detail .footer .link {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 1rem;
}

.goods-detail .footer .link .image {
    width: .4rem;
    height: .4rem;
    margin-right: auto;
    margin-left: auto;
}

.goods-detail .footer .link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.goods-detail .footer .link .name {
    margin-top: .13rem;
    font-size: .2rem;
    line-height: 100%;
    color: #666;
}

.goods-detail .footer .button {
    -webkit-flex: 1;
    flex: 1;
    height: .76rem;
    border-radius: .38rem;
    background-image: linear-gradient(90deg, rgba(64, 157, 255, 1) 0%, rgba(30, 133, 251, 1) 100%);
    font-family: inherit;
    font-size: .28rem;
    color: #fff;
}

/* 提交订单 */
.order-confirm .contact {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 1.4rem;
    padding: .3rem;
    background: #fff url("") left top/7.49rem .03rem repeat-x;
    cursor: pointer;
}

.order-confirm .contact > div:first-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.order-confirm .contact > div > div:first-child {
    font-weight: bold;
    font-size: .3rem;
    color: #282828;
}

.order-confirm .contact span {
    vertical-align: middle;
}

.order-confirm .contact span~span {
    margin-left: .3rem;
}

.order-confirm .contact .address {
    margin-top: .12rem;
    font-size: .26rem;
    color: #666;
}

.order-confirm .contact .address span~span {
    margin-left: .15rem;
}

.order-confirm .contact .address span:first-child {
    color: #ff4a4a;
}

.order-confirm .panel {
    margin-top: .12rem;
    background-color: #fff;
}

.order-confirm .panel .goods {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: .2rem .3rem;
}

.order-confirm .panel .goods .image {
    width: 2.5rem;
    height: 1.4rem;
    border-radius: .1rem;
    overflow: hidden;
}

.order-confirm .panel .goods .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.order-confirm .panel .goods .text {
    position: relative;
    -webkit-flex: 1;
    flex: 1;
    margin-left: .2rem;
}

.order-confirm .panel .goods .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .28rem;
    line-height: .36rem;
    color: #343434;
}

.order-confirm .panel .goods .group {
    position: absolute;
    bottom: 0;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    height: .4rem;
}

.order-confirm .panel .goods .price,
.order-confirm .panel .goods .vip-price {
    display: inline-block;
    font-weight: bold;
}

.order-confirm .panel .goods .price {
    font-size: .24rem;
    color: #ff5656;
}

.order-confirm .panel .goods .price span {
    font-size: .32rem;
}

.order-confirm .panel .goods .vip-price {
    font-size: .24rem;
}

.order-confirm .panel .goods .vip-price img {
    display: inline-block;
    width: .46rem;
    height: .21rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.order-confirm .panel .goods .spinner {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.order-confirm .panel .goods .spinner button {
    width: .4rem;
    height: .4rem;
    font-family: inherit;
    font-size: .24rem;
    color: #282828;
}

.order-confirm .panel .goods .spinner button:disabled {
    color: #dedede;
}

.order-confirm .panel .goods .spinner input {
    width: .68rem;
    height: .4rem;
    border-radius: .02rem;
    background-color: #f2f2f2;
    font-family: inherit;
    font-size: .22rem;
    line-height: .4rem;
    text-align: center;
    color: #282828;
}

.order-confirm .panel .postage {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .86rem;
    padding-right: .4rem;
    padding-left: .4rem;
}

.order-confirm .panel .remark {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.8rem;
    padding-right: .4rem;
    padding-left: .4rem;
}

.order-confirm .panel .postage .name,
.order-confirm .panel .remark .name {
    font-size: .3rem;
    color: #282828;
}

.order-confirm .panel .remark .name {
    -webkit-align-self: flex-start;
    align-self: flex-start;
    line-height: .46rem;
}

.order-confirm .panel .postage .name,
.order-confirm .panel .remark .textarea {
    -webkit-flex: 1;
    flex: 1;
}

.order-confirm .panel .postage .value {
    font-size: .3rem;
    color: #9a9a9a;
}

.order-confirm .panel .remark .textarea {
    margin-left: .2rem;
    resize: none;
    font-family: inherit;
    line-height: .42rem;
    font-size: .28rem;
}

.order-confirm .panel .remark .textarea::placeholder {
    color: #a8a8a8;
}

.order-confirm .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-right: .3rem;
    background-color: #fff;
}

.order-confirm .footer .text {
    -webkit-flex: 1;
    flex: 1;
    height: 1rem;
    font-size: .28rem;
    line-height: 1rem;
    text-align: center;
    color: #343434;
}

.order-confirm .footer .text .money {
    display: inline;
    color: #ff5656;
}

.order-confirm .footer .text .money span {
    font-size: .2rem;
}

.order-confirm .footer button {
    width: 2.4rem;
    height: .7rem;
    border-radius: .35rem;
    background-image: linear-gradient(90deg, rgba(64, 157, 255, 1) 0%, rgba(30, 133, 251, 1) 100%);
    font-family: inherit;
    font-size: .3rem;
    color: #fff;
}

.order-confirm .popup {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
    height: 9.2rem;
    border-top-left-radius: .16rem;
    border-top-right-radius: .16rem;
    background-color: #fff;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: .3s;
    transition: .3s;
}

.order-confirm .popup.on {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.order-confirm .popup .head {
    height: 1rem;
    font-weight: bold;
    font-size: .32rem;
    line-height: 1rem;
    text-align: center;
    color: #282828;
}

.order-confirm .popup .cont {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

.order-confirm .popup label {
    display: block;
    padding-right: .3rem;
    padding-left: .3rem;
}

.order-confirm .popup label~label>div {
    border-top: 1px solid #eee;
}

.order-confirm .popup label>div {
    padding: .3rem 1.26rem .3rem .6rem;
    background: url("") left center/.33rem no-repeat;
    font-size: .25rem;
    color: #343434;
}

.order-confirm .popup label div div:first-child {
    margin-bottom: .12rem;
    font-weight: bold;
    font-size: .28rem;
    color: #282828;
}

.order-confirm .popup input:checked+div {
    background: url("") left center/.33rem no-repeat,
        url("") right center/.28rem no-repeat;
    color: #2a8eff;
}

.order-confirm .popup .foot {
    padding: .56rem .3rem;
}

.order-confirm .popup .foot a {
    display: block;
    width: 100%;
    height: .86rem;
    border-radius: .43rem;
    background-color: #2a8eff;
    font-weight: bold;
    font-size: .3rem;
    line-height: .86rem;
    text-align: center;
    color: #fff;
}

.order-confirm .popup button {
    position: absolute;
    top: .5rem;
    right: .3rem;
    width: .28rem;
    height: .28rem;
    background: url("") center/cover no-repeat;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* 申请退款 */
.refund-apply .goods {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: .3rem;
    background-color: #fff;
}

.refund-apply .goods .image {
    width: 2.3rem;
    height: 1.28rem;
    border-radius: .1rem;
    overflow: hidden;
}

.refund-apply .goods .img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.refund-apply .goods .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-right: .2rem;
    margin-left: .2rem;
}

.refund-apply .goods .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .28rem;
    line-height: .3rem;
    color: #343434;
}

.refund-apply .goods .money {
    margin-top: .4rem;
}

.refund-apply .goods .price,
.refund-apply .goods .vip-price {
    display: inline-block;
}

.refund-apply .goods .price {
    font-size: .26rem;
    color: #9a9a9a;
}

.refund-apply .goods .price span {
    font-size: .26rem;
}

.refund-apply .goods .vip-price {
    font-size: .24rem;
}

.refund-apply .goods .vip-price img {
    display: inline-block;
    width: .46rem;
    height: .21rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.refund-apply .goods .number {
    font-size: .26rem;
    line-height: .3rem;
    color: #9a9a9a;
}

.refund-apply form {
    margin-top: .12rem;
}

.refund-apply .form-bd {
    padding-left: .3rem;
    background-color: #fff;
}

.refund-apply .form-bd>label {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    padding-top: .3rem;
    padding-right: .3rem;
    padding-bottom: .3rem;
}

.refund-apply .form-bd>label div:first-child {
    font-size: .3rem;
    color: #343434;
}

.refund-apply .form-bd>label~label {
    border-top: 1px solid #eee;
}

.refund-apply .form-bd>label input,
.refund-apply .form-bd>label select {
    -webkit-flex: 1;
    flex: 1;
    font-family: inherit;
    font-size: .3rem;
    text-align: right;
    color: #666;
}

.refund-apply .form-bd>label select {
    color: #bcbcbc;
}

.refund-apply .form-bd>label textarea {
    -webkit-flex: 1;
    flex: 1;
    margin-left: .25rem;
    font-family: inherit;
    font-size: .3rem;
    resize: none;
}

.refund-apply .form-bd>label input::placeholder,
.refund-apply .form-bd>label textarea::placeholder {
    color: #bcbcbc;
}

.refund-apply .form-bd>label div:nth-child(3) {
    margin-left: .25rem;
    font-size: .3rem;
    line-height: 1;
    color: #999;
}

.refund-apply .form-bd>label:nth-child(3) div:first-child {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

.refund-apply .upload {
    border-top: 1px solid #eee;
}

.refund-apply .upload>div:first-child {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    padding-top: .3rem;
    padding-right: .3rem;
    padding-bottom: .3rem;
    font-size: .3rem;
    color: #343434;
}

.refund-apply .upload>div:first-child>div:last-child {
    color: #bcbcbc;
}

.refund-apply .upload>div:last-child {
    padding-right: .3rem;
}

.refund-apply .upload>div:last-child::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.refund-apply .upload label {
    float: left;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 1.56rem;
    height: 1.56rem;
    border: 1px solid #ddd;
    border-radius: .03rem;
    margin-right: .3rem;
    margin-bottom: .3rem;
}

.refund-apply .upload label .image {
    width: .47rem;
    height: .47rem;
}

.refund-apply .upload label img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.refund-apply .upload label .text {
    margin-top: .15rem;
    
    font-size: .24rem;
    color: #bcbcbc;
}

.refund-apply .upload li {
    position: relative;
    float: left;
    width: 1.56rem;
    height: 1.56rem;
    border: 1px solid #ddd;
    border-radius: .03rem;
    margin-right: .3rem;
    margin-bottom: .3rem;
}

.refund-apply .upload li img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.refund-apply .upload li span {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: #2c8eff;
    -webkit-transform: translate(25%, -25%);
    transform: translate(25%, -25%);
    font-size: .4rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

.refund-apply .form-ft {
    padding: .3rem;
    margin-top: .4rem;
}

.refund-apply .form-ft button {
    width: 100%;
    height: .86rem;
    border-radius: .43rem;
    background-color: #2c8eff;
    font-family: inherit;
    font-size: .32rem;
    color: #fff;
}

/* 订单详情 */
.order-detail .section {
    background-color: #fff;
}

.order-detail .section~.section {
    margin-top: .12rem;
}

.order-detail .section.return {
    padding: .4rem .3rem;
    background-color: #666;
    font-size: .3rem;
    color: #fff;
}

.order-detail .section.return .time {
    margin-top: .15rem;
    font-size: .24rem;
}

.order-detail .section.reason {
    padding: .4rem .3rem;
    font-size: .3rem;
    color: #333;
}

.order-detail .section.reason .info {
    margin-top: .15rem;
    font-size: .24rem;
    color: #999;
}

.order-detail .section.status {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .32rem .3rem;
    background-color: #2c8eff;
    font-size: .3rem;
    color: #fff;
}

.order-detail .section.status .image {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .3rem;
}

.order-detail .section.status img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.order-detail .section.status .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.order-detail .section.status div:first-child {
    font-weight: bold;
}

.order-detail .section.status .time {
    margin-top: .1rem;
    font-size: .24rem;
    opacity: .8;
}

.order-detail .section.contact {
    padding: .4rem .3rem;
    background: #fff url("") left bottom/7.49rem .03rem repeat-x;
    font-size: .3rem;
    color: #282828;
}

.order-detail .section.contact span~span {
    margin-left: .3rem;
}

.order-detail .section.contact .address {
    margin-top: .15rem;
    font-size: .26rem;
    color: #868686;
}

.order-detail .section.goods .goods-bd {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: .26rem .3rem;
}

.order-detail .section.goods .image {
    width: 2.3rem;
    height: 1.28rem;
    border-radius: .1rem;
    overflow: hidden;
    margin-right: .2rem;
}

.order-detail .section.goods img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.order-detail .section.goods .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.order-detail .section.goods .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .28rem;
    line-height: .4rem;
    color: #343434;
}

.order-detail .section.goods .price,
.order-detail .section.goods .vip-price {
    display: inline-block;
}

.order-detail .section.goods .price {
    font-size: .26rem;
    color: #9a9a9a;
}

.order-detail .section.goods .price span {
    font-size: .26rem;
}

.order-detail .section.goods .vip-price {
    font-size: .24rem;
}

.order-detail .section.goods .vip-price img {
    display: inline-block;
    width: .46rem;
    height: .21rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.order-detail .section.goods .num {
    margin-left: .2rem;
    font-size: .26rem;
    line-height: .3rem;
    color: #9a9a9a;
}

.order-detail .section.goods .goods-ft {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .93rem;
    padding-right: .3rem;
    padding-left: .3rem;
    border-top: 1px solid #f0f0f0;
    font-size: .26rem;
    color: #282828;
}

.order-detail .section.goods .goods-ft span {
    font-weight: bold;
    font-size: .28rem;
    color: #ff5656;
}

.order-detail .section.express {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    padding: .3rem;
}

.order-detail .section.express .image {
    width: .5rem;
    height: .5rem;
    margin-right: .2rem;
}

.order-detail .section.express img {
    display: block;
    width: 100%;
    height: 100%;
    padding: .1rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ff9600;
    object-fit: cover;
    pointer-events: none;
}

.order-detail .section.express .text {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    
    font-size: .26rem;
    color: #999;
}

.order-detail .section.express .text div~div {
    margin-top: .1rem;
}

.order-detail .section.express .text span {
    color: #333;
}

.order-detail .section.express button {
    width: 1.06rem;
    height: .4rem;
    border: 1px solid #999;
    border-radius: .03rem;
    font-family: inherit;
    
    font-size: .2rem;
    color: #666;
}

.order-detail .section.list {
    padding: .3rem;
    font-size: .28rem;
    color: #282828;
}

.order-detail .section.list li {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.order-detail .section.list li~li {
    margin-top: .3rem;
}

.order-detail .section.list div:nth-child(2) {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
    color: #868686;
}

.order-detail .section.list div.msg {
    text-align: left;
    word-break: break-all;
}

.order-detail .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    width: 100%;
    padding: .2rem .3rem;
    background-color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
}

.order-detail .footer a {
    display: inline-block;
    width: 1.76rem;
    height: .6rem;
    border: 1px solid #dedede;
    border-radius: .3rem;
    vertical-align: middle;
    font-size: .27rem;
    line-height: .6rem;
    text-align: center;
    color: #aaa;
}

.order-detail .footer a~a {
    margin-left: .18rem;
}

.order-detail .footer a.blue {
    border-color: #2c8eff;
    background-color: #2c8eff;
    color: #fff;
}

/* 地址列表 */
.address-list ul {
    padding-top: .03rem;
    background: url("") left top/7.49rem .03rem repeat-x;
}

.address-list li {
    padding-right: .3rem;
    padding-left: .3rem;
    background-color: #fff;
}

.address-list li~li {
    margin-top: .12rem;
}

.address-list .head {
    padding-top: .32rem;
    padding-bottom: .32rem;
    font-size: .28rem;
    color: #282828;
}

.address-list .head div:first-child {
    margin-bottom: .08rem;
    font-weight: bold;
    font-size: .3rem;
    color: #282828;
}

.address-list .foot {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .82rem;
    border-top: 1px solid #eee;
    font-size: .28rem;
    color: #282828;
}

.address-list .foot a {
    color: #282828;
}

.address-list .foot > div {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    text-align: right;
}

.address-list .foot label div {
    padding-left: .48rem;
    background: url("") left center/.38rem .38rem no-repeat;
}

.address-list .foot input:checked + div {
    background-image: url("");
}

.address-list .foot a~a {
    margin-left: .5rem;
}

.address-list .foot a img {
    width: .38rem;
    height: .38rem;
    vertical-align: middle;
    object-fit: cover;
    pointer-events: none;
}

.address-list .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    width: 100%;
    padding: .15rem .3rem;
    background-color: #fff;
}

.address-list .footer a {
    flex: 1;
    height: .76rem;
    border-radius: .38rem;
    background-color: #2a8eff;
    vertical-align: middle;
    
    font-size: .3rem;
    line-height: .76rem;
    text-align: center;
    color: #fff;
}

.address-list .footer a:nth-child(2) {
    margin-left: .3rem;
    background-color: #feb720;
}

.address-list .footer img {
    width: .36rem;
    height: .36rem;
    margin-right: .1rem;
    vertical-align: middle;
    object-fit: cover;
    pointer-events: none;
}

.address-list .footer a:nth-child(2) img {
    width: auto;
}

.address-list .footer span {
    vertical-align: middle;
}

.address-list .nothing {
    display: block;
    width: 4.14rem;
    margin: .3rem auto;
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* 添加地址 */
.add-address .section {
    background-color: #fff;
}

.add-address .section~.section {
    margin-top: .23rem;
}

.add-address label {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .9rem;
    padding-right: .3rem;
    padding-left: .3rem;
    font-size: .3rem;
}

.add-address label~label {
    border-top: 1px solid #eee;
}

.add-address label div {
    width: 2.2rem;
    color: #343434;
}

.add-address label img {
    width: auto;
    height: .38rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.add-address input::placeholder,
.add-address textarea::placeholder {
    color: #ccc;
}

.add-address input,
.add-address textarea {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    font-family: inherit;
    font-size: .3rem;
    color: #333;
}

.add-address textarea {
    resize: none;
}

.add-address .checkbox {
    width: .42rem;
    height: .42rem;
    margin-right: .25rem;
}

.add-address img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.add-address .btn {
    padding: .3rem;
    margin-top: .2rem;
}

.add-address button {
    width: 100%;
    height: .86rem;
    border-radius: .43rem;
    background-color: #2a8eff;
    font-family: inherit;
    font-size: .32rem;
    color: #fff;
}

.add-address button ~ button {
    margin-top: .5rem;
}

.add-address button[type="button"] {
    background-color: #feb720;
}

.add-address button img {
    display: inline-block;
    width: auto;
    height: .32rem;
    margin-right: .15rem;
    vertical-align: middle;
}

/* 我的订单 */
.order-list .header {
    height: 2.6rem;
    background-color: #2c8eff;
}

.order-list .header .cont {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 1.9rem;
    padding-right: .3rem;
    padding-left: .3rem;
}

.order-list .header .text {
    -webkit-flex: 1;
    flex: 1;
}

.order-list .header .text > div:first-child {
    font-weight: bold;
    font-size: .34rem;
    color: #fff;
}

.order-list .header span {
    vertical-align: middle;
    font-size: .26rem;
    color: #fff;
    opacity: .8;
}

.order-list .header span~span {
    margin-left: .3rem;
}

.order-list .header .image {
    width: 1.22rem;
    height: 1.09rem;
}

.order-list .header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.order-list .main {
    padding-right: .3rem;
    padding-left: .3rem;
    margin-top: -.7rem;
}

.order-list .menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    border-radius: .06rem;
    background-color: #fff;
}

.order-list .menu li {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    padding-top: .3rem;
    padding-bottom: .3rem;
    overflow: hidden;
    font-size: .26rem;
    text-align: center;
    color: #282828;
    cursor: pointer;
}

.order-list .menu div:first-child {
    margin-bottom: .3rem;
}

.order-list .menu .on {
    font-weight: bold;
}

.order-list .menu .on::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 2;
    width: .78rem;
    height: .05rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.order-list .list {
    margin-top: .14rem;
}

.order-list .list li {
    border-radius: .06rem;
    background-color: #fff;
}

.order-list .list li~li {
    margin-top: .14rem;
}

.order-list .list .head {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: .84rem;
    padding-right: .3rem;
    padding-left: .3rem;
    font-size: .28rem;
    color: #282828;
}

.order-list .list .head div:first-child {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.order-list .list .head div:last-child {
    color: #2c8eff;
}

.order-list .list .cont {
    padding-left: .3rem;
    border-top: 1px solid #eee;
}

.order-list .list .cont .goods-group {
    padding-top: .3rem;
    padding-right: .3rem;
    padding-bottom: .3rem;
}

.order-list .list .cont .goods {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.order-list .list .cont .image {
    width: 2.3rem;
    height: 1.28rem;
    border-radius: .1rem;
    overflow: hidden;
}

.order-list .list .cont img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.order-list .list .cont .text {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-right: .2rem;
    margin-left: .2rem;
}

.order-list .list .cont .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .28rem;
    line-height: .4rem;
    color: #343434;
}

.order-list .list .cont .money {
    font-size: 0;
}

.order-list .list .cont .price,
.order-list .list .cont .vip-price {
    display: inline-block;
}

.order-list .list .cont .price {
    font-size: .26rem;
    color: #9a9a9a;
}

.order-list .list .cont .vip-price {
    margin-left: .05rem;
}

.order-list .list .cont .vip-price span {
    font-size: .24rem;
}

.order-list .list .cont .vip-price img {
    display: inline-block;
    width: .46rem;
    height: .21rem;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.order-list .list .cont .num {
    font-size: .26rem;
    line-height: .3rem;
    color: #9a9a9a;
}

.order-list .list .cont .sum {
    margin-top: .3rem;
    font-size: .26rem;
    text-align: right;
    color: #282828;
}

.order-list .list .cont .sum span {
    font-weight: bold;
    font-size: .28rem;
    color: #ff5656;
}

.order-list .list .cont .btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 1.06rem;
    padding-right: .3rem;
    border-top: 1px solid #eee;
}

.order-list .list .cont .btn a {
    width: 1.76rem;
    height: .6rem;
    border: 1px solid #ddd;
    border-radius: .3rem;
    font-size: .27rem;
    line-height: .6rem;
    text-align: center;
    color: #aaa;
}

.order-list .list .cont .btn a~a {
    margin-left: .18rem;
}

.order-list .list .cont .btn .blue {
    border-color: #2c8eff;
    background-color: #2c8eff;
    color: #fff;
}

.order-list .nothing {
    display: block;
    width: 4.14rem;
    margin: .3rem auto;
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* 快捷菜单 */
.shortcut {
    position: fixed;
    top: 50%;
    right: .3rem;
    z-index: 9999;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}

.shortcut .home {
    width: .86rem;
    height: .86rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

.shortcut .home img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.shortcut .menu {
    opacity: 1;
    -webkit-animation: bounceInRight .5s cubic-bezier(.215,.61,.355,1);
    animation: bounceInRight .5s cubic-bezier(.215,.61,.355,1);
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 3rem;
    height: .86rem;
    border-radius: .43rem;
    margin-right: .3rem;
    background-color: #2c8eff;
    overflow: hidden;
}

.shortcut .menu a {
    width: .52rem;
    height: .52rem;
}

.shortcut .menu a ~ a {
    margin-left: .5rem;
}

.shortcut .menu img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
}

@-webkit-keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes bounceInRight {
    0%, 60%, 75%, 90%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
        animation-timing-function: cubic-bezier(.215,.61,.355,1);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(3000px,0,0);
        transform: translate3d(3000px,0,0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px,0,0);
        transform: translate3d(-25px,0,0);
    }
    75% {
        -webkit-transform: translate3d(10px,0,0);
        transform: translate3d(10px,0,0);
    }
    90% {
        -webkit-transform: translate3d(-5px,0,0);
        transform: translate3d(-5px,0,0);
    }
    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* 素材播放 */
.task-info .ml15 {
    margin-left: 0.15rem;
}

.task-info .videoBox {
    padding: 0.25rem 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f5f5f5;
}

.task-info .video_tit {
    width: 100%;
    height: 1.6rem;
    background: #fff;
    padding: 0.3rem 0.2rem;
}

.task-info .video_tit_top {
    font-weight: 400;
    font-size: .36rem;
    line-height: .5rem;
}

.task-info .video_tit_down {
    margin-top: .09rem;
    font-weight: 400;
    font-size: .24rem;
    color: #999;
}

.task-info .video_tab {
    position: relative;
    margin-top: .16rem;
    background-color: #fff;
    box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .03);
}

.task-info .video_tab .item {
    position: relative;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: .96rem;
    font-size: .3rem;
    line-height: .96rem;
    text-align: center;
    color: #333;
}

.task-info .video_tab .item.on {
    font-weight: 500;
    font-size: .32rem;
    color: #2c8eff;
}

.task-info .video_tab .item.on::after {
    content: " ";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: .6rem;
    height: .04rem;
    border-radius: .02rem;
    background-color: #2c8eff;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.task-info .video_list_img {
    width: 2.18rem;
    height: 1.3rem;
    border-radius: 0.1rem;
}

.task-info .video_list_img img {
    width: 100%;
    height: 100%;
}

.task-info .video_list_on {
    width: 0.3rem;
    height: 0.23rem;
    border-radius: 5px;
    overflow: hidden;
}

.task-info .video_list_box {
    margin-left: 0.26rem;
    width: 62%;
}

.task-info .video_list_tit {
    height: 0.9rem;
}

.task-info .video_list_on img {
    width: 100%;
    height: 100%;
}

.task-info .video_list_sp {
    color: #999999;
    font-size: 0.26rem;
}

.task-info .video_list_btn {
    width: auto;
    height: auto;
    border: 1px solid #509efb;
    color: #509efb;
    font-size: 0.22rem;
    padding: 0.05rem 0.1rem;
    box-sizing: border-box;
    border-radius: 3px;
}

.task-info .content {
    padding: .3rem;
    background-color: #fff;
    font-size: .3rem;
    line-height: .44rem;
    color: #333;
    word-break: break-all;
}

.task-info .content img {
    display: block;
    width: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.task-info .catalogue li {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 1.02rem;
    padding-right: .3rem;
    padding-left: .3rem;
    cursor: pointer;
}

.task-info .catalogue li::before {
    content: " ";
    position: absolute;
    top: 0;
    right: .3rem;
    left: 1.1rem;
    height: 1px;
    border-top: 1px solid #f5f5f5;
    color: #f5f5f5;
    -webkit-transform-origin: center top;
    transform-origin: center top;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}

.task-info .catalogue li:first-child::before {
    display: none;
}

.task-info .catalogue li.gray {
    color: #999;
}

.task-info .catalogue .image {
    width: .38rem;
    height: .27rem;
}

.task-info .catalogue .image .img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.task-info .catalogue .title {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    margin-right: .2rem;
    margin-left: .2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 400;
    font-size: .28rem;
}

.task-info .catalogue .free {
    padding-right: .21rem;
    padding-left: .21rem;
    border-radius: .19rem;
    background-color: rgba(254, 183, 32, .1);
    font-weight: 400;
    font-size: .22rem;
    line-height: .38rem;
    color: #feb720;
}

.task-info .catalogue .iconsuozi,.task-info .catalogue .iconziyuan2 {
    font-size: .3rem;
    color: #ccc;
}

.task-info .catalogue {
    background-color: #fff;
}

.task-info .banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.task-info .intro {
    padding: .3rem;
    background-color: #fff;
    font-size: .24rem;
    line-height: .44rem;
    color: #999;
}

.task-info .intro div:first-child {
    margin-bottom: .1rem;
    font-size: .36rem;
    color: #333;
}

.task-info .audio-custom {
    padding-bottom: .49rem;
    background-color: #fff;
}

.task-info .audio-custom .progress {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-right: .3rem;
    margin-left: .3rem;
}

.task-info .audio-custom .progress .time {
    width: .75rem;
    font-weight: 400;
    font-size: .28rem;
    line-height: .4rem;
    color: #2c8eff;
}

.task-info .audio-custom .progress .bar {
    -webkit-flex: 1;
    flex: 1;
    border-radius: .02rem;
    background-color: rgba(44, 142, 255, .3);
    margin-right: .18rem;
    margin-left: .18rem;
}

.task-info .audio-custom .progress .bar .range {
    position: relative;
    height: .04rem;
    border-radius: .02rem;
    background-color: rgba(44, 142, 255, .8);
    -webkit-transition: .2s linear;
    transition: .2s linear;
}

.task-info .audio-custom .progress .bar .range .dot {
    position: absolute;
    top: 50%;
    left: 100%;
    width: .16rem;
    height: .16rem;
    border-radius: 50%;
    background-color: #2c8eff;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.task-info .audio-custom .control {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin-top: .34rem;
}

.task-info .audio-custom .control .knowledge {
    font-size: .36rem;
    color: #46505b;
}

.task-info .audio-custom .control button:nth-child(2) {
    margin-right: .88rem;
    margin-left: .88rem;
}

.task-info .audio-custom .control .icon {
    font-size: 1.1rem;
}